Javascript 在html中设置范围滑块

我想在html页面中设置两个范围滑块，第一个范围滑块不应与第二个范围滑块的最大值交叉，第二个滑块不应与第一个滑块的最小值交叉，我如何实现这一点

最小长度 最长度 错误是：无法读取null的属性“MinlenInput”，这意味着表单为null/未定义

只需将代码包装成：

最小长度 最长度

---

你似乎有两个问题。第一，正如@JeremyThille所指出的，您应该将表单包装在一个元素中。要解决防止滑块相互交叉的第二个问题，当范围值更改时，需要检查它们是否大于/小于其他范围滑块中的值。如果是，您可以相应地更改该值

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

请注意，在下面的代码段中，您可以将滑块控制柄移过最小/最大点，但当您放开鼠标时，它将弹回到正确的位置

范围_01.addEventListenerchange，检查最大值； 范围_01_text.addEventListenerchange，检查最大值； 范围_02.addEventListenerchange，检查最小值； 范围_02_text.addEventListenerchange，checkMin； 函数checkMaxevent{ 如果parseIntevent.target.value>=parseIntrange\u 02.value{ range_01.value=range_02.value； range_01_text.value=range_02_text.value； } } 功能检查事件{

---

如果parseIntevent.target.value，但在文本输入中，如果我更改的值超过最大长度的值，则它不会恢复到最大值集。我观察到的另一件事是，当我将最大长度滑块移动到60到45或55以下时，它会跳到8，并且不允许我设置所需的值45或55。@CharanRaj是的，b因为maxLength不能小于minLength。@CharanRaj我也编辑了文本输入的答案以进行更改。我同意你的意见，但当Min.length值设置为8，Max.length值设置为60时，我无法将Max.length值移动到45或55，如果我移动它，它将跳到8，这是Min.length值集。只需运行上面的剪报pet并将Max.length的值更改为45，然后看，它将跳转到8，我无法再次将其移回60。如果我将其移回60，则它将再次跳转到8，直到我将Max.length的值设置为80。