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

Question

[LitvintsevIgor]

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

Я совсем новичок, написал следующий код:

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;
  }
};

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

Comments

[LitvintsevIgor]

И если выводить в консоль значение minutesRange, то видно, что на значениях 20 и 30 ползунок останавливается дважды и действительно, когда передвигаешь его стрелками (право-лево) то на этих цифрах он как бы дважды останавливается, не переходя на следующую.

[Ankhena]

Делаете обычную шкалу с шагом 1.
Подписи делаете какие угодно.
Приводите в соответствие полученное из range значение с минутами.

p.s.
зачем вы снова и снова пишете document.getElementById..

document.getElementById("minutes-range").step = 30;

если уже определили для этого элемента константу?

[LitvintsevIgor]

Ankhena, спасибо большущее)))))