Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

slider

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

like image 252
Ronald Avatar asked Jun 05 '10 05:06

Ronald


People also ask

How do I change the color of my range?

1- Color Range SelectionWith the selection radio button active, click around the little preview area or in your image behind the dialog to select the color you want to select. You can then play around with the amount of Fuziness to tweak the range amount of similar colors that should become selected.

How do you change the color of a range in HTML?

If the general appearance of the slider is fine, but the default blue color (in Chrome) needs to fit a theme color, apply a filter: hue-rotate(); to the input[type="range"] element. Other filters can be used. Some even change the background color of the slider.


1 Answers

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!

like image 159
majman Avatar answered Oct 22 '22 07:10

majman