代码之家 › 专栏 › 技术社区 › user13631004

两个可相互调整的范围滑块

javascript

user13631004 · 技术社区 · 4 年前

我正在寻找一种方法,使用javascript根据另一个范围滑块的值修改一个范围的滑块的值。

我不会使用一个滑块有两个值,而是使用两个不同的滑块,堆叠其中一个。每个范围滑块将有一个1-10之间的可能值。我们将称之为Slider-A和Slider-B。

0 回复 | 直到 4 年前

Burgan 4 年前

当你不确定从哪里开始时,这有时会让人望而生畏,但发布一些尝试过的代码——无论多么错误——总是受到鼓励的。这条评论应该能让你开始,但我会在下面提供一个完整的例子来帮助你。

<input id="a" type="range" min="1" max="10" value="1">
<input id="b" type="range" min="1" max="10" value="10">

<script>
  // change b when a is adjusted
  document.getElementById('a').addEventListener('change', function (e) {
    document.getElementById('b').value = 10 - (e.target.value - 1)
  })

  // change a when b is adjusted
  document.getElementById('b').addEventListener('change', function (e) {
    document.getElementById('a').value = 10 - (e.target.value - 1)
  })
</script>