Question

Edit: I still have not resolved this issue. If anyone has advice I would appreciate it.

I have a jquery slider with two bars that the user can change to select a price range. Below the slider I display min: $xxx and max: $xxx to show the current price range. Here’s the code:

$("#slider-price .slider").slider({ 
    step: 10, 
    animate: true,
    range: true, 
    min: 0, 
    max: 500, 
    values: [range_price[0],range_price[1]],
    slide: function() { 
        range_price = $(this).slider("option", "values");
        $("#low-price-label").text("Min: $"+range_price[0]);
        $("#high-price-label").text("Max: $"+range_price[1]);
    }
});

The slide option looks at what the value of the slider is, and updates the min and max numbers. However, they only change on mouseup, after the user is done sliding the bar. I want the numbers to update as the user is sliding the bars. How do I do this?

Answer 1

I use this in a media player I wrote

slide: function(event, ui) {

$("#amount").text(ui.value);

}

edit: Just re-read your question, you should be able to use ‘ui.values’ instead of value to return the array , parse it and go from there.

edit2: Try this function instead of the one you have.

slide: function(event,ui) {          
   range_price =  ui.values;
   $("#low-price-label").text("Min: $"+range_price[0]);
   $("#high-price-label").text("Max: $"+range_price[1]); 
}