Невозможно установить ползунок на максимум

Question

Мы не можем установить максимальное значение для ползунка для этого перикулярного входа. Есть ли способ решить эту проблему с помощью javascript?

<input type="range" min="2" max="10" step="3" />

Answer 1

Я изменил ползунок так, чтобы он защелкнулся на месте либо 2, 5, 8 или 10, и я установил значение ползунка по умолчанию на 2. Рядом с ползунком также есть отметки, чтобы пользователь мог видеть, какие значения являются действительными.

JavaScript работает, округляя значение ползунка до ближайшего числа в последовательности 2, 5, 8 и 11. Поскольку ползунок поднимается только до 10, когда он пытается округлить его до 11, он автоматически ограничивает его значением 10.

Я предоставил jsfiddle .

const slider = document.getElementById("slider");

slider.addEventListener("change", function() {
  let rounded = (Math.round((this.value - 2) / 3) * 3) + 2;
  slider.value = rounded;
});

<input type="range" min="2" max="10" step="any" value="2" list="slider-marks" id="slider">

<datalist id="slider-marks">
  <option value="2"></option>
  <option value="5"></option>
  <option value="8"></option>
  <option value="10"></option>
</datalist>

---

Модифицированная версия

Я изменил код, чтобы привязать ползунок на месте, когда пользователь изменяет значение. Тем не менее, маркировки нельзя использовать, так как они не отображаются должным образом, и ползунок немного мигает между 5 и 8.

Я предоставил jsfiddle .

const slider = document.getElementById("slider");

setInterval(function() {
  if (slider.value >= 8) {
    slider.step = 2;
  } else {
    slider.step = 3;
  }
  let rounded = (Math.round((slider.value - 2) / 3) * 3) + 2;
  slider.value = rounded;
}, 0);

<input type="range" min="2" max="10" step="3" value="2" id="slider">