как синхронизировать Range-тип

Question

У меня есть 2 входа, как вы видите в моем коде, если вы набираете что-либо в тексте ввода / вывода, оно показывает отлично на расстоянии, но не наоборот, это моя проблема. Я также открыт для совершенно разных подходов к любой проблемеответ принят

Фрагмент кода:

var city = document.getElementById('city')
var cityrepeat = document.getElementById('cityrepeat')
var state = document.getElementById('state')
var staterepeat = document.getElementById('staterepeat')

function setCity() {
  cityrepeat.value = city.value
}

function setd() {
  city.value = cityrepeat.value
}

function setState() {
  staterepeat.value = state.value
}

City    
<input id="city" type="text" onKeyUp="setCity()" size=5/></br>
State
<input id="state" type="text" onKeyUp="setState()" size=5/></br>
City repeat
<input id="cityrepeat" type="range" min="1" max="100"onKeyUp="setd()"/></br> 
State repeat
<input id="staterepeat" type="range"/>

Answer 1

Вместо onKeyUp="setd()" используйте onchange="setd()"

<input id="cityrepeat" type="range" min="1" max="100" onchange="setd()"/>

Или даже лучше : чтобы сделать обновление значения «живым», вы можете сделать это:

в html:

<input id="cityrepeat" type="range" min="1" max="100" onmousedown="updating=true;setd()" onmouseup="updating=false"/>

в вашем сценарии :

var updating = false

function setd() {
  city.value = cityrepeat.value
  if (updating){
    requestAnimationFrame(setd)
  }
}

var city = document.getElementById('city')
var cityrepeat = document.getElementById('cityrepeat')
var state = document.getElementById('state')
var staterepeat = document.getElementById('staterepeat')

var updating = false

function setCity() {
  cityrepeat.value = city.value
}

function setd() {
  city.value = cityrepeat.value
  if (updating){
  	requestAnimationFrame(setd)
  }
}

function setState() {
  staterepeat.value = state.value
}

City    
<input id="city" type="text" onKeyUp="setCity()" size=5/><br>
State
<input id="state" type="text" onKeyUp="setState()" size=5/><br>
City repeat
<input id="cityrepeat" type="range" min="1" max="100" onmousedown="updating=true;setd()" onmouseup="updating=false"/><br> 
State repeat
<input id="staterepeat" type="range"/>

Answer 2

Попробуйте использовать onChange вместо onKeyUp на слайдере.

    <input id="cityrepeat" type="range" min="1" max="100"onChange="setd()"/></br>