Question

There are many examples of using the jQuery sliders and running a maximum cumulative total. However, I have been unsuccessful in drafting a version that will work with my application. I need to be able to set individual opacities of 6 openlayers layers, using the jQuery sliders, while never exceeding a cumulative total of 100 slider units.

---

Updated

Here is how I am currently implementing it. I cannot for the life of me figure out how to go about code refactoring so that I reduce code duplication…

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

sliders.each(function() {
var value = parseInt($(this).text()),
    availableTotal = 100;

$(function() {
    $("#one").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_1.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#two").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_2.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#three").slider({
        range: "min",
        min: 0,
        value: 20,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_3.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#four").slider({
        range: "min",
        min: 0,
        value: 16,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_4.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#five").slider({
        range: "min",
        min: 0,
        value: 16,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_5.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
    $("#six").slider({
        range: "min",
        min: 0,
        value: 8,
        slide: function(event, ui) {

            // Get current total
            var total = ui.value;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
            if (total > availableTotal) {
                return false;
            }
            hii_6.setOpacity(ui.value / 100);
            // Update display to current value
            $(this).siblings().text(ui.value);
        }
    });
});
});

---

Original

The example I am most familiar with is posted here and below
http://jsfiddle.net/markieta/cWyQ3/

var sliders = $("#sliders .slider");
sliders.each(function() {
    var value = parseInt($(this).text()),
        availableTotal = 100;
    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 100,
        range: "min",
        animate: true,
        slide: function(event, ui) {
            // Update display to current value
            $(this).siblings().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 max = availableTotal - total;
            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");
                t.slider("option", "max", max + value).siblings().text(value);
                t.slider('value', value);
            });
        }
    });
});

Originally, I was setting the OpenLayers layer opacity using the
setOpacity method during the slide event of each unique slider.
However, I could not figure out how to keep a running total with this
method so as my sliders would not exceed 100 cumulative units.

$(function() {
    $( "#slider1" ).slider({
    range: "min",
    min: 0,
    value: opacities[0],
    slide: function(e, ui) {
        hii_1.setOpacity(ui.value / 100);
        $( "#amount1" ).val( ui.value );
        }
    });
    $("#amount1" ).val($( "#slider1" ).slider( "value" ) );
});

** x6 sliders **

Any insight?

Answer 1

If the slide callback returns false then the thumb won’t move:

Return false in order to prevent a slide, based on ui.value.

So all you need to do is grab the total values of the other sliders, add the new value of the current slider, and return false if it is too high:

slide: function(event, ui) {
    var total = ui.value;
    // sliders is all the sliders, we skip `this` because
    // we need to get the current value from ui.value as
    // above.
    sliders.not(this).each(function() {
        total += $(this).slider("option", "value");
    });
    if(total > availableTotal) // availableTotal is your max across all sliders
        return false;
    //...
}

Demo: http://jsfiddle.net/ambiguous/QWYzm/