javascript - 在html中设置范围 slider

Question

我想在 html 页面中设置两个范围 slider ，第一个范围 slider 不应超过第二个范围 slider 的最大值，第二个 slider 不应超过第一个 slider 的最小值，我该如何实现这一点。

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>