Gergő Sz. - 2 years ago 69
Javascript Question

# How to set a range element's thumb

I am making a little game using multiple range elements to set percentage of a class from the population.
Like,

``````<input type="range" id="Miners_r" value="50" min="0" max="100" step="1" >
<input type="range" id="Farmers_r" value="50" min="0" max="100" step="1" >
``````

How could I prevent setting the others to a higher value than 100% added?
I would like to use js or jquerry to solve this.

`Miner_r.value + Farmers_r.value >= 100`
in this case I should not be able to set the others to bigger than 0

It's quite easy. The logic you are looking for is:

1. Listen to the change in value of any one of the range element
2. Calculate the value allowed for other siblings so that the sum is 100
3. Set the other sibling to this value

In my code below, I assumed that there will be use cases where multiple siblings are involved—in that case, the remainder value will be distributed evenly among all the other siblings. It should also work well for your case.

p/s: I have given all your inputs a general class of `.range-group` just to simply the selection.

``````\$(function() {
\$('.range-group').on('change', function() {
var \$t = \$(this),
\$s = \$(this).siblings('.range-group');

// Cap siblings values to 100 minus the current value.
// The remainder of the values will be distribueted evenly among
// all other siblings.
\$s.val(100 - \$t.val()/\$s.length);
});
});``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" class="range-group" id="Miners_r" value="50" min="0" max="100" step="1" >
<input type="range" class="range-group" id="Farmers_r" value="50" min="0" max="100" step="1" >``````

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download