JQueryUI Slider – 当前位置的工具提示

目前我有一个滑块和一个小输入文本框，根据您在其上滚动的位置进行更新。

这是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：

  
​ 

然而，看起来有点奇怪有一个小文本框，图形位于滑块的顶部，所以我希望它更新其水平位置，使其位于滑块（.ui-slider-handle）的句柄上方可能 – 就像一种工具提示。

Answer 1

我不确定您是否需要输入字段或只是显示文本的方法，但您可以显示像这个jsFiddle示例的工具提示。

jQuery的

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