Jquery multiple sliders interconnected

Question

I try to set 3 jquery ui slider interconnected, the sum of the 3 sliders must always stay at 100, so when I change the value for one slider, the others slider must be updated.

In exemple, if one slider have a value of 40 and I raise this value to 50, the two others slider have to decreased by 5.

Can anyone help me please? thanks'

Answer 1

the probability of high value is 50 in any case... so set all the three sliders to 0 to 50... and their class as class="selector inactive"

$(".selector").slide(function(event, ui){

    $(event.srcElement).removeClass('inactive');

    var valuechange = 0;

    $('.inactive').each(function(value, item){
       // get sum of other two sliders
       valuechange += $(item).slider( "option", "value");
    });

    // subtract sum(othertwo) + this value with 100 to get current changed value
    valuechange = (valuechange + (ui.values[0])) - 100;

    $('.inactive').each(function(value, item){
          // add other sliders values to changedvalue / 2
          $(item).slider( "option", "value", $(item).slider( "option", "value") + (( valuechange / 2) * -1));
    });

    $(event.srcElement).toggleClass('inactive');
});

hope this solved your problem