Не работает ползунок JS

Рейтинг: 1Ответов: 0Опубликовано: 08.02.2023

Всем привет! У меня на странице два ползунка, с выводам числа, у второго ползунка не работает вывод чисел(в 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 + "%";
        }
    });
});

Скриншот:Скрин работоспособности

Ответы

Ответов пока нет.