Question

我正在处理一个项目，该项目涉及<input type="range">控制<span> <div>内left <span> <input>的值<input> }按比例匹配<span>中拇指的移动。也就是说，当拇指到达<div>的末尾时，<span>必须到达zpool replace [poolname] [old device id] [spare device id]的末尾，并且当拇指移动到开头时，pool: ZFS_NAS state: DEGRADED status: One or more devices could not be opened. Sufficient replicas exist for the pool to continue functioning in a degraded state. action: Attach the missing device and online it using 'zpool online'. see: http://illumos.org/msg/ZFS-8000-2Q scan: resilvered 989G in 4h42m with 0 errors on Mon May 2 19:45:33 2016 config: NAME STATE READ WRITE CKSUM ZFS_NAS DEGRADED 0 0 0 raidz1-0 DEGRADED 0 0 0 spare-0 DEGRADED 0 0 0 12082773611957310038 UNAVAIL 0 0 0 was /dev/gptid/1418d56c-431b-11e4-b9f7-28924a2f106f gptid/503d6d1c-106e-11e6-a169-28924a2f106f ONLINE 0 0 0 gptid/1608e28a-431b-11e4-b9f7-28924a2f106f ONLINE 0 0 0 gptid/1699dab6-431b-11e4-b9f7-28924a2f106f ONLINE 0 0 0 spares 16673430511205791764 INUSE was /dev/gptid/503d6d1c-106e-11e6-a169-28924a2f106f errors: No known data errors也是如此。我试了很多东西，但没有什么能按照我想要的方式运作。我非常确定有一个聪明而优雅的数学解决方案，但我不擅长......你能帮助我吗？

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

Example in codepen

Answer 1

概括Fausto的回答，

＆＃13;

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);

＆＃13;

.wrap {
  background-color: #99c;
  height: 10px;
  position: relative;
}
#fake-range {
  background-color: #000;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 10px;
}

＆＃13;

<input id="range" type="range" min="0" max="196" value="0">
<div class="wrap">
  <span id="fake-range"></span>
</div>

＆＃13;

Answer 2

以下是使用简单JS ... http://codepen.io/anon/pen/GZwxzx

的解决方案

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 + "%"; }。

constexpr int foo = 123;

我这样做很有趣，但考虑到这是一个代码请求，而不是一个真正的问题。

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

2 个答案: