CODEWITHSUNDEEP
javascriptjquery
Rage
Rage

Reputation: 33

How would you get sliders to dynamically change based on the value of the others?

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

Basically I want to have a few sliders on the screen (in the jsfiddle there are 2 but I want to try and make it work for 14, crazy!) and when you change the value of one, it changes the value of the other ones so that they all equal 100 all the time. Is this possible?

<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>

UPDATE 12/17/2014

I've had success, somewhat, with getting the other sliders to react to moving just one: 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>

Now I'm trying to figure out the math and how to implement it so that, for example, you move slider1 to 50 the other 3 sliders will go to 16.66 so that the sum of all the sliders equals 100(roughly). I came up with this: var x = (100 - val) / 3; & document.getElementById('slider2').value = x; But it doesn't seem to work.

Upvotes: 0

Views: 881

Answers (3)

stranger4js
stranger4js

Reputation: 267

Yes just give τthe main slider an id(start) and the others a class(sliders) And here is my solution

<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);
});

});

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

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;
}

Actually, these function can be brief and generate a new one.

Upvotes: 0

Chris Franklin
Chris Franklin

Reputation: 3984

Yes it is possible. To put you on the right path add the following to outputUpdate1:

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

You will see the slider update itself based on the changing of slider 1.

Upvotes: 1

Related Questions