Apr 5, 2012

Range Slider | Range Input Using HTML5 & CSS3 | NO JAVASCRIPT

A regular website coder will face a situation where they will have to use a range slider to fulfill some requirements. I regularly used JQuery UI range slider, but thanks to HTML5 that they made us our life easy. HTML5 has a new input tag, its type is defined as "range". Using this, a range slider will be formed, but for now this is only supported by -webkit- supported browsers. You can read more on new HTML5 input tags over here.

Range Slider

In todays tutorial we will explore range slider.

Basic syntax:

<input type="range" id="rangeinput" value="50"/>

You can edit the CSS and change the slider icon.

input[type="range"] {
-webkit-appearance: none;
background-color: black;
height: 2px;

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
position: relative;
top: -1px;
z-index: 1;
width: 11px;
height: 11px;

-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));

You can check the demo and download the files. Demo will be only supported in WEBKIT browsers


  1. Nidhi Bhargava18/4/12 5:30 PM

    Its not working on mozilla........how to make it work

  2. I mentioned above also, range input is not supported by Mozilla, it just works on Webkit browsers, i.e. chrome and safari??

  3. can i make it vertical?

  4. You can do that by changing the webkit appearance,
    -webkit-appearance: slider-vertical;

  5. I can't seem to find the CSS that can change the background of the slider before the thumb to a different color that the entire slider background. any ideas?

  6. check my code, its written

  7. the background css in your code only changes the entire slider background. I want to add a color to the front side (simile to a blue progress bar) that moves as you move the slider.

  8. Yaa thats something which I also don't know :P

    I ll check for that but by that time you can go ahead with JQuery UI Sliders

  9. thanks, that what I thought.

  10. what if you want to make a vertical slider with a set of styles you define yourself? Typically you would put -webkit-appearance: none; to make that happen. How do you combine the two?

  11. Loïc Geeraerts23/6/13 6:13 PM

    what kind of slider is on your picture?