As explained here, IE allows styling of the lower and upper fill or track regions in CSS as follows:
/* The following only affects the range input in IE */ input[type="range"]::-ms-fill-lower { background-color: red; } input[type="range"]::-ms-fill-upper { background-color: blue; }
<input type="range">
Does anyone know of a way to apply different styles to the upper and lower tracks of a range input in Firefox, Chrome, etc. using CSS or any JS library?
UPDATE:
As pointed out by Wilson F, this is now supported in Firefox:
/* The following only affects the range input in FF */ input[type="range"]::-moz-range-progress { background-color: red; } input[type="range"]::-moz-range-track { background-color: blue; }
<input type="range">
To style the range input with CSS you'll need to apply styles to two pseudo-elements: ::-webkit-slider-thumb and ::-webkit-slider-runnable-track . Find out how you can apply custom styling and make the range input more functional and appealing. Contents of the article: CSS selectors for the range input.
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.
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below. Tip: Always add the <label> tag for best accessibility practices!
min (The lowest accepted value in the range) max (The highest accepted value in the range) step (The increment/decrement step value default is 1) value (The starting or default value of the slider)
First of all, read the article Styling Cross-Browser Compatible Range Inputs with CSS by Daniel Stern. His idea is to make the input invisible and then apply the custom styles.
He also developed an excellent online tool named randge.css in which you select the style preset and parameters and get auto generated CSS code like the following one:
input[type=range] { -webkit-appearance: none; margin: 10px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #ac51b5; border-radius: 25px; border: 0px solid #000101; } input[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; -webkit-appearance: none; margin-top: -3.6px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ac51b5; } input[type=range]::-moz-range-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; background: #ac51b5; border-radius: 25px; border: 0px solid #000101; } input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 12.8px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 39px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #ac51b5; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input[type=range]::-ms-fill-upper { background: #ac51b5; border: 0px solid #000101; border-radius: 50px; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } input[type=range]::-ms-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: 39px; border-radius: 7px; background: #65001c; cursor: pointer; } input[type=range]:focus::-ms-fill-lower { background: #ac51b5; } input[type=range]:focus::-ms-fill-upper { background: #ac51b5; } body { padding: 30px; }
<input type="range">
Yes, with CSS only it's possible on IE only, but if you don't mind to add some scripting it can be simulated with linear gradient. See the following sample: codepen.io/ryanttb/pen/fHyEJ
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