2016-08-05 27 views
1

我有三个范围中的第一范围主要是,另外它的孩子..当我改变我想自动改变另一个范围主要范围主营范围变化值这里的孩子范围-CSS的JavaScript

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>

+0

它们之间有什么关系? –

+0

这里主要改变孩子..我搜索他们之间的关系! @AdamAzad –

回答

2

这是一个基本的例子

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>

+0

优秀这就是我想要的......但是你也可以改变其他范围..接受你的答案 –

+0

@JackKing,更新 –

+0

没关系,我的浏览器出了问题,但是当我重新加载我的网页时,抱歉@AdamAzad。 –