JavaScript:将输入范围行为链接到另一个元素

JavaScript: Link a input range behavior to another element

本文关键字：链接 另一个 元素 输入 范围 JavaScript      更新时间：2023-09-26

我正在从事一个项目，该项目涉及<input type="range">控制<div>内的<span>，以便<span>的left值与拇指在<input>中的移动成比例匹配。也就是说，当拇指到达<input>的端部时，<span>必须到达<div>的端部，并且当拇指移动到开始时<span>也必须到达。我尝试了很多方法，但都没有达到我想要的效果。我很确定有一个聪明优雅的数学解决方案，但我不擅长…你们能帮我吗？

p.S：如果可能的话，我想要一些简单的JavaScript。

代码笔中的示例

推广Fausto的答案，

var range = document.getElementById('range'),
    fake = document.getElementById('fake-range'),
    parent = fake.parentElement;
function renderFake() {
  var available = parent.clientWidth - fake.offsetWidth,
      ratio = (range.value - range.min) / (range.max - range.min);
  fake.style.left = ratio * available + 'px';
}
range.addEventListener('input', renderFake);
window.addEventListener('resize', renderFake);
.wrap {
  background-color: #99c;
  height: 10px;
  position: relative;
}
#fake-range {
  background-color: #000;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 10px;
}
<input id="range" type="range" min="0" max="196" value="0">
<div class="wrap">
  <span id="fake-range"></span>
</div>

这里有一个使用简单JS的解决方案。。。http://codepen.io/anon/pen/GZwxzx

<input id="range" onchange="updateFakeRange(this.value);" type="range" min="0" max="196" value="0">
<div class="wrap">
  <span id="fake-range"></span>
</div>

请注意输入上的onchange="updateFakeRange(this.value);"。

var inputRange = document.getElementById("range");
var fakeRange = document.getElementById("fake-range");
function updateFakeRange(value) {
  value = value * 100 / 196;
  fakeRange.style.left = value + "%";
}

我这样做是为了好玩，但考虑到这是一个代码请求，而不是一个真正的问题。

相关文章：