Jack King Jack King - 4 months ago 9
CSS Question

Main range change value here child range -css javascript

I have three range first range it Main , and another it child .. when i change main range i want automatically change another range



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

This is a basic example

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>

If you want live feedback as the range changes without waiting for mouse release, you could listen 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>