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"));

});