范围滑块-避免在达到另一个元素中指定的值时向前移动 [英] Range slider - avoid moving forward when reaching a value specified in another element

问题描述

假设我有一个从值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>

这篇关于范围滑块-避免在达到另一个元素中指定的值时向前移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！