【问题标题】：Unable to set slider input to maximum无法将滑块输入设置为最大值
【发布时间】：2020-05-27 04:06:39
【问题描述】：

我们无法将此特定输入的滑块设置为最大值。有什么方法可以用 javascript 处理这个问题？

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

【问题讨论】：

为什么一定要从2开始，在3上去，又不能超过10？
假设我也可以从外部设置滑块值，例如带数字输入。
如果用户在更改为10后尝试更改滑块，是否希望滑块遵守属性？
我希望能够将滑块值设置为 10。
所以你希望它能够设置为 2、5、8 和 10？

标签： html input range

【解决方案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);

&lt;input type="range" min="2" max="10" step="3" value="2" id="slider"&gt;

【讨论】：