Question

I am using jQuery ui range slider http://jqueryui.com/demos/slider/#range in which there are two values that are being get when sliding is done (selection of range is done) then how to get those values into jQuery variables and only after the range is being selected ? i have to make a ajax call after that i get those values . can anyone help me this that how to get those values only after the both range selection is completed ?

I’m using this jQuery ui function to initiate the slider

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

Answer 1

$(function() { 
    $( "#slider-range" ).slider({ 
        range: true, 
        min: 0, 
        max: 500, 
        values: [ 75, 300 ], 
        slide: function( event, ui ) { 
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 
        },
        change: function(event, ui) {
            // when the user change the slider
        },
        stop: function(event, ui) {
            // when the user stopped changing the slider
            $.POST("to.php",{first_value:ui.values[0], second_value:ui.values[1]},function(data){},'json');
        }
    }); 
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + 
                        " - $" + $( "#slider-range" ).slider( "values", 1 ) ); 
});