Color a part of an input range - css

Question

Hi i've got a input range on html5 min 0 and max 100.
But i would like to color a part for example between 70 and 100.
I don't want to use bootstrap for this.
I don't know how to do that.

Answer 1

You can easily do this by using a linear-gradient as background for the track. All that we need to do is create a gradient which is colored only for the width that we need (30% for your case because you need it colored only between 70-100) and then position it with respect to the track's (the track is the bar of the range input) right side. Since the styling of range inputs is still in experimental phase we have to use browser prefixed selectors (to select the track of each browser) and then apply styles to it. We also have to do some additional corrections to address browser specific problems, I've marked these with inline comments in the code.
The below code is tested and found to be working fine in Edge, IE11 and latest versions of Chrome, Firefox and Opera (all on a Windows 10 machine).
Note: This will only color the part between 70-100 of the range input differently. This doesn't have the code to make the appearance of range input the same in all browsers. I've not done that because that is out of the scope of this question.
Also, as mentioned by ssc-hrep3 in his comment, this may not be good for production implementation because these things are still in experimental stage and we've to use browser specific selectors but if you want to apply custom styling to HTML5 range inputs then there is probably no other way.
input[type=range] {
-webkit-appearance: none;
border: 1px solid black; /* just for demo */
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border: none; /* just do away with the track's border */
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
<input type="range" min="0" max="100" value="70" step="10" />
For the benefit of future readers: Just in case you need uniform styling across all major browsers then you could use the below snippet. It produces almost similar output in all of them.
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
height: 10px;
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border-color: transparent;
border-style: solid;
border-width: 10px 0px; /* dummy just to increase height, otherwise thumb gets hidden */
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 18px;
width: 18px;
margin-top: -4px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
height: 18px;
width: 18px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-ms-thumb {
height: 18px;
width: 18px;
margin-top: 0px; /* nullify default margin */
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
<input type="range" min="0" max="100" value="70" step="10" />