Не работает ползунок JS
Всем привет! У меня на странице два ползунка, с выводам числа, у второго ползунка не работает вывод чисел(в input), и не меняется бекграунд(синий). я нач. разработчик не знаю как поправить. html:
<div class="compilation__slider">
<div class="wrapper">
<div class="slider">
<div class="progress"></div>
</div>
<div class="range-input">
<input type="range" class="range-min" min="0" max="10000" value="0" step="100">
<input type="range" class="range-max" min="0" max="10000" value="5000" step="100">
</div>
<div class="price-input">
<div class="field">
<span class="tested">От</span>
<input type="number" class="input-min" value="0">
</div>
<div class="separator">-</div>
<div class="field">
<span class="tested">До</span>
<input type="number" class="input-max" value="5000">
</div>
</div>
</div>
</div>
JS:
const rangeInput = document.querySelectorAll(".range-input input"),
priceInput = document.querySelectorAll(".price-input input"),
range = document.querySelectorAll(".slider .progress",);
let priceGap = 100;
priceInput.forEach(input =>{
input.addEventListener("input", e =>{
let minPrice = parseInt(priceInput[0].value),
maxPrice = parseInt(priceInput[1].value);
if((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput[1].max){
if(e.target.className === "input-min"){
rangeInput[0].value = minPrice;
range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";
}else{
rangeInput[1].value = maxPrice;
range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
}
}
});
});
rangeInput.forEach(input =>{
input.addEventListener("input", e =>{
let minVal = parseInt(rangeInput[0].value),
maxVal = parseInt(rangeInput[1].value);
if((maxVal - minVal) < priceGap){
if(e.target.className === "range-min"){
rangeInput[0].value = maxVal - priceGap
}else{
rangeInput[1].value = minVal + priceGap;
}
}else{
priceInput[0].value = minVal;
priceInput[1].value = maxVal;
range.style.left = ((minVal / rangeInput[0].max) * 100) + "%";
range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
}
});
});
Источник: Stack Overflow на русском