Hi Guys,
Does anyone know how to change the slider range color as the slider handle is dragged?
Cheers!
Here is the theme: https://range-slider-weblocks.webflow.io
Here is the slider code:
<input type="range" value="1" class="slider" name="pages" min="1" max="20"/>
<style>
.slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 10px;
background: #0082f3;
outline: none;
-webkit-transition: .2s;
transition: opacity .2s;
cursor: pointer;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ff9900;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 30px;
height: 30px;
border-radius: 50%;
background: #ff9900;
cursor: pointer;
}
</style>