目前我有一个滑块和一个小输入文本框,根据您在其上滚动的位置进行更新.
这是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-slider-handle)的手柄上方可能 – 就像一种工具提示.
解决方法:
我不确定您是否需要输入字段或只是显示文本的方法,但您可以显示像这样的工具提示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()
})