如何限制输入 [type=\"range\"]答案

【问题标题】：How to clamp an Input[type="range"]如何限制输入 [type=\"range\"]
【发布时间】：2022-11-29 17:13:37
【问题描述】：

我希望滑块不超过某个限制。我如何设置这是 HTML 并在 javascript 中更改它？

<input type="range" min="0" max="100" value="30">

我想设置它，使滑块永远不会超过某个值，尽管该值会在滑块上，即滑块应该有 min:0 max:100 但永远不会超过 70。

【问题讨论】：

【解决方案1】：

这可能适用于您的情况，但我认为将最大值设置为 70 更好。

function test(e, el) {
  if (e.target.value > 70) el.value = 70;
  document.querySelector("h1").innerHTML = "range value: " + e.target.value;
}

<input type="range" min="0" max="100" style="width: 100%;" oninput="test(event, this)">
<br>
<h1>range value: 50</h1>

【讨论】：