javascript - 此处的主要范围更改值子范围-css javascript

Question

我有三个范围，第一个范围是 Main，另一个是子范围 .. 当我更改主要范围时，我想自动更改另一个范围

Main:<input type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
  Child range:<br>
<input type="range" name="range" step="1" value="0" min="0" max="200" 0/><input type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>

Answer 1

这是一个基本的例子

window.onload = function(){
  
  var rangeMain = document.getElementById('main'),
      rangeChild1 = document.getElementById('child1'),
      rangeChild2 = document.getElementById('child2');
  rangeMain.onchange = function(){
      rangeChild1.value = this.value;
      rangeChild2.value = this.value;
  }
  
}

Main:<input id="main" type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
  Child range:<br>
   <input id="child1" type="range" name="range" step="1" value="0" min="0" max="200" 0/>
   <input id="child2" type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>

如果您希望在不等待鼠标释放的情况下随着范围的变化获得实时反馈，您可以收听 oninput

var rangeMain = document.getElementById('main'),
    rangeChild1 = document.getElementById('child1'),
    rangeChild2 = document.getElementById('child2');
rangeMain.onchange = function(){
    rangeChild1.value = this.value;
    rangeChild2.value = this.value;
}
rangeMain.oninput = function(){
    rangeChild1.value = this.value;
    rangeChild2.value = this.value;
}

Main:<input id="main" type="range" name="range" step="1" value="0" min="0" max="200" 0 style="width:100%;" /> <br> <BR>
  Child range:<br>
   <input id="child1" type="range" name="range" step="1" value="0" min="0" max="200" 0/>
   <input id="child2" type="range" name="range" step="1" value="0" min="0" max="200" />
<h3>when i change Main range i want change child range with Main
</h3>