Dynamic JQuery Sliders

These sliders will stay within the boundaries of both individual slider and cumulative maximums

by mikecruz

HTML

<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<form>
<ul id="sliders">
    <li>
        <span class='slideBG'><div class="slider"></div>
        <input type="text" class="value" name="slider1" value="0" min="0" max="0"/>
        <span>0</span></span>
    </li>
    <li>
        <span class='slideBG'><div class="slider"></div>
        <input type="text" class="value" name="slider2" value="0" min="0" max="500" />
        <span>0</span></span>
    </li>
    <li>
        <span class='slideBG'><div class="slider"></div>
        <input type="text" class="value" name="slider3" value="0" min="0" max="500" />
        <span>0</span></span>
    </li>
    <li>
        <span class='slideBG'><div class="slider"></div>
        <input type="text" class="value" name="slider4" value="0" min="0" max="500"/>
           <span>0</span></span>
    </li>
    <li>
        <span class='slideBG'><div class="slider"></div>
        <input type="text" class="value" name="slider5" value="0" min="0" max="500"/>
           <span>0</span></span>
    </li>
    <li>
        <span class='slideBG'><div class="slider"></div>
        <input type="text" class="value" name="slider6" value="0" min="0" max="500"/>
           <span>0</span></span>
    </li>
</ul>
    <br><label for="sliderMax">Total Max:</label>
    <input type='text' id="sliderMax" name='sliderMax' value='1000'/>
    <br><br><label for="sliderTotal">Slider Totals:</label>
    <input type="text" id="sliderTotal" name="sliderTotal" value="0" />
</form>

CSS

form {
    margin: 20px;
}
#sliders {
    width:300px;
}

.slideBG {
    display:block;
    width: 310px;
    height: 22px;
    margin-bottom: 20px;
    background: #E2E2E2;
    border: 1px solid #000;
}

#sliders div {
    width:300px;
    height: 22px;
    padding: 0;
    border: none;
    cursor:pointer;
}
.ui-slider-handle { 
    z-index: 2;
    background:#fff;
    border:1px solid #000;
    position:relative;
    display:block;    
    height:22px;
    width:16px;
    margin-top:5px;
    cursor:pointer;
}
.value {
    float:left;
    position: relative;
    left: 330px;
    top: -23px;
    width: 50px;
    height: 18px;
    padding: 0;
    font-weight: bold;
}

JavaScript

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

sliders.each(function() {
    var max = document.getElementById("sliderMax").value;
    var value = Number($(this).text(), 10),
        availableTotal = max;

    $(this).empty().slider({
        value: 0,
        min: 0,
        max: $(this).siblings('.value').attr("max"),
        range: "max",
        step: 1,
        animate: 100,
        disabled: (function(curMax) {
            if (curMax < 1) {
                return 1;
            }
            return 0;
        })($(this).siblings('.value').attr("max")),
        slide: function(event, ui) {
            // Update text box to current value and call .change()
            $(this).siblings('.value').attr("value", ui.value);
            $(this).siblings('.value').trigger('change');
        }
    });
});
$(".slider").each(function() {
    var disabled = Number($(this).slider("option", "disabled"));
    if(disabled == 1) {
        $(this).siblings('.value').attr('disabled', 'disabled');    
    }
});

$(".value").change(function() {
    var thisAmount = Number($(this).prop("value"));
    var totalMax = Number(document.getElementById("sliderMax").value);
    var indMin = Number($(this).attr("min"));
    var indMax = Number($(this).attr("max"));
    var total = 0;

    //Get the values of all other text boxes
    $('.value').not(this).each(function() {
        total += Number($(this).prop("value"));
    });

    //Find the remaining from our total sliders max
    var remaining = totalMax - total;

    if(remaining < 0) {
      remaining = 0;   
    }
    //if we are under our minimums, go for it! Otherwise, reduce the number.
    if (thisAmount >= indMin && thisAmount < indMax && thisAmount < totalMax && thisAmount < remaining) {
        $(this).siblings(".slider").slider("option", "value", thisAmount);
        //total += thisAmount;
    }
    else {
        //var setMax = ((indMax + totalMax) - Math.abs(indMax - totalMax)) / 2;
        var setMax = Math.min(indMax, totalMax,...