jquery ui slider

how to programmatically move the slider handles

by hrabinowitz

HTML

<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range"></div>
<br><br>
<button id="button1">increase left</button>
<button id="button2">decrease right</button>

CSS

#slider-range {
    width: 90%;
    margin-left: 10px;
}

JavaScript

$(function() {
    // cannot use ui because not available for "create" event
    function onSlideCreate( event, ui ) {
        var s = $("#slider-range");
        $( "#amount" ).val(s.slider("values", 0) + " - " +s.slider("values", 1));
    }
    
    function onSlide( event, ui ) {
        $('#amount').val(ui.values[0] + " - " + ui.values[1]);
    }
    
    var s = $( "#slider-range" ).slider({
        range: true,
        min: 100,
        max: 500,
        step: 10,
        values: [ 125, 300 ],
        slide: onSlide,
        change: onSlide,
        create: onSlideCreate
    });
    
    $('#button1').click(function() {
        var s = $('#slider-range');
        var vals = s.slider('values');
        console.log("before, vals=", vals);
        s.slider('values', [vals[0] + 10, vals[1]]);
        var vals = s.slider('values');
        console.log("vals=", vals);
    });
    $('#button2').click(function() {
        var s = $('#slider-range');
        var vals = s.slider('values');
        console.log("before, vals=", vals);
        s.slider('values', [vals[0], vals[1]-10]);
        var vals = s.slider('values');
        console.log("vals=", vals);
    });
    
});