Style input range background before thumb
css, html, javascript, jquery, less
Solution
document.querySelectorAll(".__range").forEach(function(el) {
el.oninput =function(){
var valPercent = (el.valueAsNumber - parseInt(el.min)) /
(parseInt(el.max) - parseInt(el.min));
var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
el.style = style;
};
el.oninput();
});
.__range{
margin:30px 0 20px 0;
-webkit-appearance: none;
background-color: #f5f6f8;
height: 3px;
width: 100%;
margin: 10px auto;
}
.__range:focus{
outline:none;
}
.__range::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #29907f;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}
<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">
Problem
I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like: Chrome doesnt seem to support `input[type='range']::-webkit-slider-thumb:before` anymore and I am at a loss how to style it. Here's what I have so far: ``` input[type='range'] { min-width: 100px; max-width: 200px; &::-webkit-slider-thumb { -webkit-appearance: none !important; background-color: @white; border: 1px solid @gray-4; height: 14px; width: 14px; &:hover, &:focus, &:active { border-color: @blue; background-color: @gray-2; } } &::-webkit-slider-runnable-track { background-color: @gray-2; border: 1px solid @gray-4; } } ```