Combined total for multiple jQuery-UI Sliders done twice

Question

I have 2 sliders which are dependent on each other. The max is 100 for the 2 sliders. If the value of the first one is 40% the value of the second one will be set as 60%. However, I need to have 2 sets of the above scenario occurring on the same page. I've tried: Jsfiddle

The first set of sliders are only supposed to be dependent on each other and this should be replicated in the second set. However, I'm facing an issue where the first slider and second slider in the first set of sliders are affecting the second set of sliders instead.

(html):

First set
<ul id="sliders">
    <li>
        <div class="slider">70</div>
        <span class="value">0</span>%
    </li>
    <li>
        <div class="slider">30</div>
        <span class="value" >0</span>%
    </li>
</ul>

second set
<ul id="sliders2">
    <li>
        <div class="slider2">70</div>
        <span class="value">0</span>%
    </li>
    <li>
        <div class="slider2">30</div>
        <span class="value" >0</span>%
    </li>
</ul>

Javascript:

var sliders = $("#sliders .slider");
var availableTotal = 100;

sliders.each(function() {
    var init_value = parseInt($(this).text());

    $(this).siblings('.value').text(init_value);

    $(this).empty().slider({
        value: init_value,
        min: 0,
        max: availableTotal,
        range: "max",
        step: 2,
        animate: 0,
        slide: function(event, ui) {

            // Update display to current value
            $(this).siblings('.value').text(ui.value);

            // Get current total
            var total = 0;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });

            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;

            var delta = availableTotal - total;

            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");

                var new_value = value + (delta/2) + 1;

                if (new_value < 0 || ui.value == 100) 
                    new_value = 0;
                if (new_value > 100) 
                    new_value = 100;

                t.siblings('.value').text(new_value);
                t.slider('value', new_value);
            });
        }
    });
});

var sliders = $("#sliders2 .slider2");
var availableTotal = 100;

sliders.each(function() {
    var init_value = parseInt($(this).text());

    $(this).siblings('.value').text(init_value);

    $(this).empty().slider({
        value: init_value,
        min: 0,
        max: availableTotal,
        range: "max",
        step: 2,
        animate: 0,
        slide: function(event, ui) {

            // Update display to current value
            $(this).siblings('.value').text(ui.value);

            // Get current total
            var total = 0;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });

            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;

            var delta = availableTotal - total;

            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");

                var new_value = value + (delta/2) + 1;

                if (new_value < 0 || ui.value == 100) 
                    new_value = 0;
                if (new_value > 100) 
                    new_value = 100;

                t.siblings('.value').text(new_value);
                t.slider('value', new_value);
            });
        }
    });
});

My hunch is that var sliders = $("#sliders2 .slider2"); doesn't retrieve the second set of sliders...

------Solved---- I've edited my code to what Swires has pointed out. Have also updated the code to the right formula for the maths part. The new fiddle: The correct version

Answer 1

I hate it when this happens to me, you probably just needed another set of eyes on it. You've set both sets of sliders to the variable:

var sliders

Changed the second to sliders2 in this fiddle: http://jsfiddle.net/e8fCy/1/ and it works as you expected.

Edit On further examination your maths may also be off, will check on it later on.