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:

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

You can edit the CSS and change the slider icon.

[css]
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));
}
[/css]

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

12 comments :

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

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

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

    ReplyDelete
  3. can i make it vertical?

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

    ReplyDelete
  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?

    ReplyDelete
  6. check my code, its written

    ReplyDelete
  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.

    ReplyDelete
  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

    ReplyDelete
  9. thanks, that what I thought.

    ReplyDelete
  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?

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

    Hello,
    what kind of slider is on your picture?
    Regards

    ReplyDelete