Learn How to Code in HTML5 and CSS3

HTML5 Canvas Tutorials How To Style HTML5 Range Slider Across Multiple Browsers The range is one of the new input type introduced in HTML5. This input type allows one to input number within the specified range. The browsers will render this input type natively as a slider control. It’s a very intuitive user interface that we commonly find in an App. But as you can see above, each browser displays this input type in a slightly different taste that may not sit well with some designers. Recommended Reading: Creating & Styling Progress Bar With HTML5 In Chrome, Safari, and Opera Safari and Opera are Webkit-based browsers. Webkit provides an easy way to style any input type, including range. From this stage, we can add anything such as border, background color, rounder border and so on. As you can see below, the handle bar is the only remaining part from the input that is not affected from the above code. And that’s how we style input type range in a Webkit browser. In Firefox We apply the exact same styles. In Internet Explorer Final Thought