@LitvintsevIgor

Как у input type="range" сделать разные шаги, то есть что бы step изменялся, а не всегда был равен одному значению?

Привет, подскажите пожалуйста, как на чистом JS сделать так, чтобы по умолчанию, сначала, значение step было 2, потом 4, потом 5, потом 10 и в конце 30, то есть чтобы ползунок в обоих направлениях останавливался только на значениях: 2,4,6,10,15,20,30,60.
То есть должно получиться плюс минус как на картинке
5f75b65924d6f892790430.png
Я совсем новичок, написал следующий код:

HTML:
<input type="range" min="0" max="60" step="2" id="minutes-range" value="2" class="input-range"/>


JS:
const minutesRange = document.getElementById("minutes-range");

let changeStep = (minutesRange) => {
  if (minutesRange.value > 30) {
    document.getElementById("minutes-range").step = 30;
  } else if (minutesRange.value > 20) {
    document.getElementById("minutes-range").step = 10;
  } else if (minutesRange.value > 10) {
    document.getElementById("minutes-range").step = 5;
  } else if (minutesRange.value > 6) {
    document.getElementById("minutes-range").step = 4;
  } else {
    document.getElementById("minutes-range").step = 2;
  }
};


Поначалу показалось, что все работает четко, обрадовался, но если начать играться ползунком не только в одном направлении (на увеличение), а находясь на разных значениях перемещать его вправо и влево, то шаг становится не таким как мне нужно. Я так понимаю, что вопрос очень легкий, но никак что-то не въеду и на просторах интернета не могу найти ответ.
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы