JQueryUI Slider - Tooltip for the Current Position

Question

At the moment I have a slider and an small input text box which updates based on where you scroll on 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 it looks a bit odd having the small text box with the figure just at the top of the slider, so I would like it to update its horizontal position so it is above the handle of the slider (.ui-slider-handle) if possible - like a sort of tooltip.

Answer 1

I'm not sure if you need the input field or just a way to display the 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()
})​