jQueryUI的滑块 - 工具提示的当前位置(JQueryUI Slider - Tooltip

目前，我有一个滑块和更新的基于你在哪里滚动上有一个小的输入文本框。

这里是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"));​

这里是HTML / CSS：

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

<div id="slider"></div>​

但是它看起来有点奇怪具有与该数字只是在滑盖上方的小文本框，所以我想它，所以它是滑块（的.ui滑块手柄）的手柄上方，以更新其水平位置，如果可能的 - 就像一种工具提示。

Answer 1:

我不知道，如果你需要输入域或只是一个显示文本的方式，但您可以显示这样的提示的jsfiddle例子 。

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()
})​

文章来源: JQueryUI Slider - Tooltip for the Current Position