Is there a way to style HTML5's range control?

css html slider
Ronald picture Ronald · Jun 5, 2010 · Viewed 26.5k times · Source

Is there a way to style HTML5's range control? Is it possible to change the color of the line the slider slides on?

Answer

majman picture majman · Jun 10, 2010

Turns out, there is in webkit:

 input[type="range"]{
   -webkit-appearance:none !important;
 }

 input[type="range"]::-webkit-slider-thumb{
   -webkit-appearance:none !important;  
 }

You can then add whatever attributes you need to each those selectors. Background, gradient, etc...

Hope that helps!

Related questions

Change the Arrow buttons in Slick slider

I want to change the arrows in my slick slider but it does not change. I want the next and previous button as an image. I have tried putting it in a <style> but it still not working. …

Read More
Slick Slider Next Arrows not showing

I'm trying to get the next and previous arrows to show up next to the product slider, just like in the Slick Slider example. But my sample doesn't seem to load the appropriate fonts to make that happen. Here is …

Read More
Placing text over images

I am using owl-carousel to make a slider for a website. I could easily make a slider using the following code : <div id="owl-slider" class="owl-carousel"> <div> <img src="images/1.jpg" /> </div> &…

Read More