dportillo23• 260
@dportillo23
Posted
One way to solve the issue with pseudo element supported just on firefox is to add a linear gradient as background-image, and control it sizes with js, so it fills til the thumb:
css
input[type= "range"] {
background: var(--slider-main-bg);
background-image: linear-gradient(var(--slider-fill), var(--slider-fill));
background-repeat: no-repeat;
}
Inside the setInterval function:
js
let sliderValue = slider.value;
let percentage = (sliderValue / 5) * 100 // 5 is the amount of choices you have now.
slider.style.backgroundSize = `${percentage} 100%` // percentage in X yo be dinamically adjusted with the position of the thumb and 100% in Y to fill it all.
Marked as helpful
0
