2

Есть вот такой код, в нем я установил минимальный отступ между ползунками с помощью rangeGap. Все вроде как должно работать, но они продолжают наезжать друг на друга. Возможно кто-то подскажет в чем ошибка.

const progressBar = document.querySelector('.slider--progress');
const inputMin = document.querySelector('.input--min');
const inputMax = document.querySelector('.input--max');
const inputRange = [inputMin, inputMax];

const rangeGap = 50000;

inputRange.forEach(function (el) {
  el.addEventListener('input', function (e) {
    let minValue = parseInt(inputRange[0].value);
    let maxValue = parseInt(inputRange[1].value);
    
    if (maxValue - minValue < rangeGap) {
      if (e.target.className === 'input--min') {
        inputRange[0].value = maxValue - rangeGap;
      } else if (e.target.className === 'input--max') {
        inputRange[1].value = minValue + rangeGap;
      }
    } else {
      progressBar.style.left = (minValue / inputRange[0].max) * 100 + '%';
      progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 + '%';
    }
  });
});
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: rgb(107, 216, 107);
}

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 50px;
  height: 30px;
  width: 500px;
  padding: 15px 10px;
  border-radius: 10px;
  background: rgb(42, 138, 42);
}

.slider--body {
  background: rgb(250, 250, 250);
  height: 4px;
  width: 100%;
  position: relative;
  border-radius: 5px;
}

.slider--progress {
  position: absolute;
  left: 25%;
  right: 25%;
  background: rgb(107, 216, 107);
  height: 4px;
  border-radius: 10px;
}

.slider--inputs {
  position: relative;
}

.slider--inputs > input {
  pointer-events: none;
}

.slider--input {
  position: absolute;
  top: -2.4px;
  left: -3px;
  height: 5px;
  width: calc(100% + 2px);
  background: none;
  -webkit-appearance: none;
}

.slider--input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  background: rgb(107, 216, 107);
  border-radius: 50%;
  border: 1px solid rgb(42, 138, 42);
  pointer-events: auto;
  -webkit-appearance: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Double-range slider</title>
  </head>
  <body>
    <div class="slider">
      <div class="slider--body">
        <div class="slider--progress"></div>
        <div class="slider--inputs">
          <input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
          <input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
        </div>
      </div>
    </div>

    <script src="double-range-slider.js"></script>
  </body>
</html>

1

1 ответ 1

1

Вместо className === 'class', я написал classList.contains('class')

const progressBar = document.querySelector('.slider--progress');
const inputRange = document.querySelectorAll('.slider--input');

let rangeGap = 50000;

inputRange.forEach(function (el) {
  el.addEventListener('input', function (e) {
    let minValue = parseInt(inputRange[0].value);
    let maxValue = parseInt(inputRange[1].value);
    if (maxValue - minValue < rangeGap) {
      if (e.target.classList.contains('input--min')) {
        inputRange[0].value = maxValue - rangeGap;
      } else if (e.target.classList.contains('input--max')) {
        inputRange[1].value = minValue + rangeGap;
      }
    } else {
      progressBar.style.left = (minValue / inputRange[0].max) * 100 + '%';
      progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 + '%';
    }
  });
});
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: rgb(107, 216, 107);
}

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 50px;
  height: 30px;
  width: 500px;
  padding: 15px 10px;
  border-radius: 10px;
  background: rgb(42, 138, 42);
}

.slider--body {
  background: rgb(250, 250, 250);
  height: 4px;
  width: 100%;
  position: relative;
  border-radius: 5px;
}

.slider--progress {
  position: absolute;
  left: 25%;
  right: 25%;
  background: rgb(107, 216, 107);
  height: 4px;
  border-radius: 10px;
}

.slider--inputs {
  position: relative;
}

.slider--inputs > input {
  pointer-events: none;
}

.slider--input {
  position: absolute;
  top: -2.4px;
  left: -3px;
  height: 5px;
  width: calc(100% + 2px);
  background: none;
  -webkit-appearance: none;
}

.slider--input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgb(42, 138, 42);
  pointer-events: auto;
  -webkit-appearance: none;
  background: rgb(107, 216, 107);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Double-range slider</title>
  </head>
  <body>
    <div class="slider">
      <div class="slider--body">
        <div class="slider--progress"></div>
        <div class="slider--inputs">
          <input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
          <input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
        </div>
      </div>
    </div>

    <script src="double-range-slider.js"></script>
  </body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.