jQuery Slider MinMax

by Jens Kühn

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    amount<input type="text" name="amount" id="amount" class="date" /><br />
    high<input type="text" name="amount_high" id="amount_high" class="date" /><br />
    low<input type="text" name="amount_low" id="amount_low" class="date" /><br /><br />
    
    <div id="slider-range" style="width:600px"></div>
    <br /><br />
        amount<input type="text" name="amount" id="amount2" class="date" /><br />
    high<input type="text" name="amount_high" id="amount_high2" class="date" /><br />
    low<input type="text" name="amount_low" id="amount_low2" class="date" /><br /><br />
    
    <div id="slider-range2" style="width:600px"></div>
    <br /><br />
        amount<input type="text" name="amount" id="amount3" class="date" /><br />
    high<input type="text" name="amount_high" id="amount_high3" class="date" /><br />
    low<input type="text" name="amount_low" id="amount_low3" class="date" /><br /><br />
    
    <div id="slider-range3" style="width:600px"></div>
    <br /><br />
        amount<input type="text" name="amount" id="amount4" class="date" /><br />
    high<input type="text" name="amount_high" id="amount_high4" class="date" /><br />
    low<input type="text" name="amount_low" id="amount_low4" class="date" /><br /><br />
    
    <div id="slider-range4" style="width:600px"></div>

JavaScript

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

    $(function() {
        $( "#slider-range" ).slider({
            range: 'min',
            min: 0,
            max: 10000000,
            step: 100000,
            value: 1000000,
            slide: function( event, ui ) {
                $( "#amount" ).val( "$0 - $" + addCommas(ui.value.toFixed(2)) );
                $( "#amount_high" ).val(0);
                $( "#amount_low" ).val(ui.value.toFixed(2) - .01 );
                var high1 = ui.value;
            },
            stop: function(event, ui){
                var valuesOfSecond = $( "#slider-range2" ).slider("option", "values");
                var diff = valuesOfSecond[1] - valuesOfSecond[0];
                
                // This line changes min value (minimum border, not the slider on left)
                //$( "#slider-range2" ).slider("option", "min", ui.value);
                
                // This line changes the slider on left
                $( "#slider-range2" ).slider("option", "values", [ui.value, ui.value+diff]);
            }
            });
    $( "#slider-range2" ).slider({
            range: true,
            min: 0,
            max: 10000000,
            step: 100000,
            values: [ 0, 1000000 ],
            slide: function( event, ui ) {
                $( "#amount2" ).val( "$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2)) );
                $( "#amount_high2" ).val(ui.values[ 0 ].toFixed(2));
                $( "#amount_low2" ).val(ui.values[ 1 ].toFixed(2) - .01 );
            }
            });
    $( "#slider-range3" ).slider({
            range: true,
            min: 0,
            max: 10000000,
            step: 100000,
            values: [ 0, 1000000 ],
           ...