I have this comparison Slider and on page refresh I want the position of the Dot(thumb) of the range slider to be in the middle and not take the same position as before the page refresh. position image preview
So when reloading the page the range slider is not even to the current "Compare" position
let slideValue = document.querySelectorAll('.jsSliderComparison')
slideValue.forEach((clicker) => {
clicker.addEventListener('input', sliderComparison)
})
function sliderComparison(e) {
slideValue.forEach((el) => {
document.querySelectorAll('.jsSliderComparer').forEach((element) => {
element.style.clipPath =
'polygon(0 0,' +
e.target.value +
'% 0,' +
e.target.value +
'% 100%, 0 100%)'
})
})
}<div class="slider slider--comparison">
<img src="SOURCE" />
<img class="jsSliderComparer" src="SOURCE" />
<input max="100" min="0" value="50" type="range" class="jsSliderComparison" />
</div>Solution: Set a default on load
slideValue.forEach((loader) => {
loader.value = 50
})