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