JQueryUI Slider - tooltip for current position

Question

At the moment, I have a slider and a small text input field, which is updated depending on where you scroll it.

Here is the javascript:

$("#slider").slider({ value: 500, min: 0, max: 1000, step: 50, slide: function(event, ui) { $("#budget").val(ui.value); }, change: function(event, ui) {} }); $("#budget").val($("#slider").slider("value"));​ 

And here is the html / css:

 <input type="text" id="budget" style="width:50px;text-align:center"/> <div id="slider"></div>​ 

However, this looks a little strange when a small text box with a picture is only at the top of the slider, so I would like it to update its horizontal position so that it is above the slider handle (.ui-slider descriptor), if possible - sort of a hint.

Answer 1

I'm not sure if you need an input field or just a way to display text, but you can show a tooltip like this jsFiddle example .

JQuery

 var tooltip = $('<div id="tooltip" />').css({ position: 'absolute', top: -25, left: -10 }).hide(); $("#slider").slider({ value: 500, min: 0, max: 1000, step: 50, slide: function(event, ui) { tooltip.text(ui.value); }, change: function(event, ui) {} }).find(".ui-slider-handle").append(tooltip).hover(function() { tooltip.show() }, function() { tooltip.hide() })​