JSFiddle

Question

http://jsfiddle.net/theoriginalrage/fvjjrwou/

基本上我想在屏幕上有一些滑块（在jsfiddle中有2个，但我想尝试让它工作14，疯了！）当你改变一个值时，它会改变值其他的，所以他们都一直等于100。这可能吗？

<label for=slider1></label>
<input type=range min=0 max=100 value=60 id=slider1 step=.01 oninput="outputUpdate1(value)" list=ticmarks>
<output for=slider1 id=percent1>60</output>%
<script>
function outputUpdate1(val) {
    document.querySelector('#percent1').value = val;
}
</script>
<hr align="left" width="25%">
<label for=slider2></label>
<input type=range min=0 max=100 value=40 id=slider2 step=.01 oninput="outputUpdate2(value)" list=ticmarks>
<output for=slider2 id=percent2>40</output>%
<script>
function outputUpdate2(val) {
    document.querySelector('#percent2').value = val;
}
</script>
<datalist id=ticmarks>
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</datalist>

更新2014年12月17日

我在某种程度上取得了成功，让其他滑块对只移动一个做出反应： http://jsfiddle.net/theoriginalrage/y9yqhyzm/

<datalist id=ticmarks>
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</datalist>
<br>
<label for=slider1></label>
<input type=range min=0 max=100 value=25 id=slider1 step=1 oninput="outputUpdate1(value)" list=ticmarks>
<output for=slider1 id=percent1>25</output>%
<script>
function outputUpdate1(val) {
    document.querySelector('#percent1').value = val;
    document.getElementById('slider2').value = 100 - val;
    document.getElementById('slider3').value = 100 - val;
    document.getElementById('slider4').value = 100 - val;
}
</script>
<br>
<label for=slider2></label>
<input type=range min=0 max=100 value=25 id=slider2 step=1 oninput="outputUpdate2(value)" list=ticmarks>
<output for=slider2 id=percent2>25</output>%
<script>
function outputUpdate2(val) {
    document.querySelector('#percent2').value = val;
    document.getElementById('slider1').value = 100 - val;
    document.getElementById('slider3').value = 100 - val;
    document.getElementById('slider4').value = 100 - val;
}
</script>
<br>
<label for=slider3></label>
<input type=range min=0 max=100 value=25 id=slider3 step=1 oninput="outputUpdate3(value)" list=ticmarks>
<output for=slider3 id=percent3>25</output>%
<script>
function outputUpdate3(val) {
    document.querySelector('#percent3').value = val;
    document.getElementById('slider1').value = 100 - val;
    document.getElementById('slider2').value = 100 - val;
    document.getElementById('slider4').value = 100 - val;
}
</script>
<br>
<label for=slider4></label>
<input type=range min=0 max=100 value=25 id=slider4 step=1 oninput="outputUpdate4(value)" list=ticmarks>
<output for=slider4 id=percent4>25</output>%
<script>
function outputUpdate4(val) {
    document.querySelector('#percent4').value = val;
    document.getElementById('slider1').value = 100 - val;
    document.getElementById('slider2').value = 100 - val;
    document.getElementById('slider3').value = 100 - val;
}
</script>

现在我想弄清楚数学以及如何实现它，例如，你将slider1移动到50，其他3个滑块将转到16.66，以便所有滑块的总和等于100（粗略）。我想出了这个： var x = (100 - val) / 3; ＆安培; document.getElementById('slider2').value = x; 但它似乎没有用。

Answer 1

是的，这是可能的。为了让您走上正确的道路，请将以下内容添加到outputUpdate1：

document.getElementById('slider2').value = 100-val;

您将看到滑块根据滑块1的更改自行更新。

Answer 2

JSFiddle

function outputUpdate1(val) {
    document.querySelector('#percent1').value = val;
    document.getElementById('slider2').value = val; 
    document.getElementById('percent2').value = val;
}
 function outputUpdate2(val) {
    document.querySelector('#percent2').value = val;
    document.getElementById('slider1').value = val; 
    document.getElementById('percent1').value = val;
}

实际上，这些功能可以简短并生成一个新功能。

Answer 3

是的，只需给主滑块一个id（开始），其他一个类（滑块）这是我的解决方案

<input type="range" id="start" min="0" max="200" value="0"/>
<input type="range" class="sliders" min="0" max="200" value="0"/>
<input type="range" class="sliders" min="0" max="200" value="0"/>
<input type="range" class="sliders" min="0" max="200" value="0"/>
<input type="range" class="sliders" min="0" max="200" value="0"/>
<input type="range" class="sliders" min="0" max="200" value="0"/>
<input type="range" class="sliders" min="0" max="200" value="0"/>
$(document).ready(function(){


$("#start").mousemove(function(){
$(".sliders").val(100);
});

});

如何根据其他人的价值动态更改滑块？

3 个答案:

JSFiddle