Блог

Эй, я хочу синхронизировать 2 входа, поэтому, если кто-то изменит ползунок, тогда также следует изменить ввод номера и наоборот, я знаю, что есть другой ответ на вопрос, но у меня не получилось, потому что важно не менять имена классов или идентификаторы, синхронизировать только ввод номера со слайдером, но не наоборот, мой код:

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

Вы даже можете сократить все это до:

 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>  

 let range=document.querySelector("input[type=range]");
let number=document.querySelector('input[type=number]')
range.addEventListener("change",(e)=>{
  number.value=e.target.value;
})
number.addEventListener("change",(e)=>{
  range.value=e.target.value;
})
  

Для получения дополнительной информации:https://codepen.io/Gangster_sCode/pen/abNKJMm