jQuery slider range

Question

I am trying to use the range property of the jQuery slider so that the slider control displays two handles from which the user can select a price range for real estate. The code I have is:

$("#price").slider({ range: true, minValue: 0, maxValue: 2000000,
  change:
  function(e, ui) {
    var range = (Math.round(ui.range) * 10) + " to " + ui.value;
    $("#pricedesc").text(range);
  } 
});

The price range should be from $0 to $2,000,000. When I slide the handles on the slider though I get unusual values such as "690 to 13". How exactly is the double handle slider meant to work?

Answer 1

To access the slider handle values in a double handled slider you need to access them from the slider( "value", index ) function. Try the following code:

$(document).ready(function(){
    $("#price").slider(
      { range: true, 
        min: 0, 
     max: 2000000, 
     change: function(e,ui) { 
       alert($("#price").slider("value", 0) + ' - ' + $("#price").slider("value", 1) );
    }});
    $("#price").slider("moveTo", 500000, 1);
  });

Answer 2

thank you very much for this usful answer

Answer 3

Slight correction. You need to call slider('values', n) not slide('value', n) for a double slider.

Answer 4

another slight correction, instead of:

$("#price").slider("moveTo", 500000, 1);

try the following code to be able to set the second slider handler to the max value;

var max = $('#price').slider('option', 'max');
$("#price").slider( 'values' , 1 , max );