在 html 中设置范围滑块

Question

我想在 html 页面中设置两个范围滑块，第一个范围滑块不应该跨越第二个范围滑块最大值，第二个滑块不应该跨越第一个滑块的最小值，我该如何实现。

Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
	             <input type="number" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
   Max.Length<br><input type="range" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
	             <input type="number" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>

Answer 1

错误是：Cannot read property 'MinlenInput' of null，表示form 为空/未定义。

只需将您的代码包装在 <form> 中：

<form>
  Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
  <input type="number" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" onkeyup="checkLength1(this)" /><br> Max.Length
  <br><input type="range" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
  <input type="number" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
</form>

Answer 2

您似乎有两个问题。首先，正如@JeremyThille 指出的那样，您应该将表单包装在<form> 元素中。要解决第二个问题（防止滑块相互交叉），当范围值发生变化时，您需要检查它们是否大于/小于另一个范围滑块中的值。如果是这样，您可以相应地更改该值。

我在您的第二个滑块和每个滑块旁边的文本输入中添加了 ID，仅用于此演示。您可以以任何您喜欢的方式引用它们。我还在您的文本输入的onkeyup 属性中删除了对checkLength 的调用。

请注意，在下面的 sn-p 中，您可以将滑块手柄移过最小/最大值点，但是当您松开鼠标时，它会弹回正确的位置。

range_01.addEventListener("change", checkMax);
range_01_text.addEventListener("change", checkMax);
range_02.addEventListener("change", checkMin);
range_02_text.addEventListener("change", checkMin);

function checkMax(event) {
  if (parseInt(event.target.value) >= parseInt(range_02.value)) {
    range_01.value = range_02.value;
    range_01_text.value = range_02_text.value;
  }
}

function checkMin(event) {
  if (parseInt(event.target.value) <= parseInt(range_01.value)) {
    range_02.value = range_01.value;
    range_02_text.value = range_01_text.value;
  }
}

<form>
  Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
  <input type="number" id="range_01_text" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" /><br> Max.Length
  <br><input type="range" id="range_02" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
  <input type="number" id="range_02_text" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" /><br>
</form>