范围滑块 - 避免在达到另一个元素中指定的值时向前移动

Question

假设我有一个从值 1 到 100 的范围滑块默认情况下，我可以将它从 1 滑动到 100。

我希望滑块在达到另一个元素中指定的值时停止。我一直在这样尝试（其中 20 将是元素中的值，对于示例来说更容易），但这并不完美。 Thumb 确实停止了，但我认为如果你继续滑动，它会在内部记住那个值，即使你没有看到它。

编辑：在这里使用 for 循环会好吗？

for(i=slider.value;i<20;i++)
...

if (slider.value >=20)
slider.value=20

有哪位更擅长这方面的人可以提供帮助？

Answer 1

如果您还没有将所有内容包装在 <form> 中，那么假设您的限制是由另一个 <input> 设置的，为 <form> 分配一个事件处理程序，这样它就会在任何时候触发有一个“输入”事件。让事件处理程序将 range 输入的 [max] 属性值更改为限制 <input>.

的 [value]

const limit = e => {
  const io = e.currentTarget.elements;
  let max = io.limit.value;
  io.range.max = max;
  io.view.value = io.range.value;
};

const ui = document.forms.ui;
ui.oninput = limit;

input {
  display: inline-block;
  width: 5ch;
  text-align: right;
}

#range {
  width: 20ch
}

<form id='ui'>
  <input id='limit' type='number' max='100' value='100'>
  <output id='view'>0</output><br>
  <input id='range' type='range' min='0' max='100' value='0'>
</form>

范围滑块 - 避免在达到另一个元素中指定的值时向前移动

Range slider - avoid moving forward when reaching a value specified in another element

html

javascript

css

slider