Is there a way to style HTML5's range control? Is it possible to change the color of the line the slider slides on?
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.
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.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With