I used the jQuery UI slider component in my page to set a range of prices. I can also use their ui.values[] to set and show the new values in other divs.
How can I make to see the new value under the handle. I.e. if I moved the handle to $100, I want to set the "$100" text right under that handle.
BTW, I use the range version - to set a range of prices, so I got TWO handles on my slider (min & max).
var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
range: true,
min: minPriceRange,
max: maxPriceRange,
step: 10,
values: [ minPriceRange, maxPriceRange ],
slide: function( event, ui ) {
("#fromRangeText").text("$" + ui.values[ 0 ]);
$("#toRangeText").text("$" + ui.values[ 1 ]);
}
});
You may use the .position
utility function from jQuery UI to position the labels:
$("#slider").slider({
...
slide: function(event, ui) {
var delay = function() {
var handleIndex = $(ui.handle).data('index.uiSliderHandle');
var label = handleIndex == 0 ? '#min' : '#max';
$(label).html('$' + ui.value).position({
my: 'center top',
at: 'center bottom',
of: ui.handle,
offset: "0, 10"
});
};
// wait for the ui.handle to set its position
setTimeout(delay, 5);
}
});
See it action: http://jsfiddle.net/william/RSkpH/1/.