How do I dynamically change min,max values for jquery ui slider?

Question

So I have a page with a jquery ui slider on it initialized with the following:

var min = $("#attrInformation").data("lowest_price"),
max = $("#attrInformation").data("highest_price");

    $( "#slider-range" ).slider({
        range: true,
        min: min,
        max: max,
        values: [ min, max ],
        slide: function( event, ui ) {
            var start = ui.values[0],
            end = ui.values[1];

            $("#startPrice").text(start);
            $("#endPrice").text(end);
        },
        stop: function(event,ui){
            var start = ui.values[0],
            end = ui.values[1];

            refineObject.price_min = start;
            refineObject.price_max = end;

            refineResults(refineObject);
        }
    });

and i want to be able to change the min, max, AND the value for which the two handles are on based on the results of an ajax call. so i've tried something like this:

    $.get("ajax.php",options,function(data){
    $('.middle_container').html(data);          

    $('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
    $('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
    $('#slider-range').slider("value", $('#slider-range').slider("value"));

        });

where my min and max are contained in two hidden divs with the class start_price and end_price . this currently does not work, it doesn't update the max price and the slider's right handle appears over on the left out of position. any suggestions on how to make this work? i'm using php for the backend. the start_price and end_price code is working and correct.

Answer 1

Make sure $('.middle_container').find('.start_price').val() and $('.middle_container').find('.end_price').val() are returning proper values. Also to set the value of the slider you have to use the same syntax which you are using for setting min/max values. Also

Try this

$.get("ajax.php",options,function(data){
    $('.middle_container').html(data);          

    $('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
    $('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
    $('#slider-range').slider( "option", "value", $('#slider-range').slider("value"));

});

Answer 2

Destroy the slider first, which removes the slider functionality completely. This will return the element back to its pre-init state.

$("#selector").slider("destroy");

After that you can add new values to the slider as,

$("#selector").slider({
    range: "max",
    min: 0, // min value
    max: 200, // max value
    step: 0.1,
    value: 200, // default value of slider
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    }
});​

This works.

Answer 3

If you want to do this on an input value changing you can do something like this.

$('#inputid').focusout(function() {

    // slider destroy and create as Shailesh showed
});

I was going to use keyup instead of focus, but depending on the internal checks you make, you could end up rebuilding your slider many times which would not be a benefit as you wont use it until you moving on from the input.