javascript - 同步 2 HTML 输入范围和数量

Question

嘿，我想同步 2 个输入，所以如果有人更改 slider ，那么也应该更改数字输入，反之亦然，我知道还有其他已回答的问题，但对我来说不起作用，因为重要的是不要仅更改任何类名或 ID 与 slider 同步的数字输入，但反过来也不行，我的代码是:

<div class="slidecontainer">
  <input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
  <input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>

我的js是

document
  .querySelector(".slider")
  .addEventListener("input", updateValue);
document
  .getElementsByClassName("number")
  .addEventListener("input", updateValue);

function updateValue(e) {
  var sibling =
    e.target.previousElementSibling ||
    e.target.nextElementSibling;
  sibling.value = e.target.value;
}

Answer 1

您甚至可以将整个事情缩短为:

const inputs=[...document.querySelectorAll("input")];
inputs.forEach((inp,i)=>inp.addEventListener("input",()=>
  inputs[1-i].value=inputs[i].value )
)

<div class="slidecontainer">
  <input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
  <input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>