范围滑块-避免在达到另一个元素中指定的值时向前移动
本文介绍了范围滑块-避免在达到另一个元素中指定的值时向前移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
假设我有一个从值1到100的范围滑块
默认情况下，我可以将其从1滑到100。
我希望滑块在达到另一个元素中指定的值时阻塞。
我一直在尝试这样做(其中20是元素中的值，只是对于本例来说更简单)，但这并不完美。拇指确实停止了，但我认为，如果你在内部继续滑动，它会记住这个值，即使你看不到它。
编辑：
For循环在这里会有好处吗？
for(i=slider.value;i<20;i++)
...
if (slider.value >=20)
slider.value=20
谁能在这方面做得更好？
推荐答案
如果您尚未将所有内容包装在<form>中，则假定您的限制是由另一个<input>设置的，请为<form>分配一个事件处理程序，以便它将在有&q；输入&q；事件时触发。让事件处理程序将range输入的[max]属性值更改为限制<input>的[value]。
数据-lang=”js”数据-隐藏=”假”数据-控制台=”真”数据-巴贝尔=”假”>
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>这篇关于范围滑块-避免在达到另一个元素中指定的值时向前移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，