Javascript jqueryslider:延迟在句柄旁边添加标签
我有一个类似的设计目标,就是向JQuery滑块添加一个标签,在用户拖动滑块时显示滑块的当前值。这些答案的问题是,当滑块即将移动到新位置时,Javascript jqueryslider:延迟在句柄旁边添加标签,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我有一个类似的设计目标,就是向JQuery滑块添加一个标签,在用户拖动滑块时显示滑块的当前值。这些答案的问题是,当滑块即将移动到新位置时,slide事件会触发,并为ui对象提供新值。好的,很好,但是我能找到的滑块的唯一位置是旧的,而不是新的位置。滑块上有足够的步数,这并不是很明显,但是如果我减少步数,您可以看到标签显示在滑动手柄的旁边 我已经从另一个问题中更新了JSFIDLE来说明这个问题: 因此,tl;dr:如何通过在幻灯片事件期间获取滑块手柄的最终位置,避免在用户拖动手柄时绘制滑块标签时出现
slide
事件会触发,并为ui
对象提供新值。好的,很好,但是我能找到的滑块的唯一位置是旧的,而不是新的位置。滑块上有足够的步数,这并不是很明显,但是如果我减少步数,您可以看到标签显示在滑动手柄的旁边
我已经从另一个问题中更新了JSFIDLE来说明这个问题:
因此,tl;dr:如何通过在幻灯片事件期间获取滑块手柄的最终位置,避免在用户拖动手柄时绘制滑块标签时出现延迟?编辑:
这个小黑客应该做你需要的
$(document).ready(function() {
$("#slider").slider({
value:0,
min: 0,
max: 5,
step: 1,
range: 'min',
slide: function( event, ui ) {
var that = $(this);
setTimeout(function() {
var offsetLeft = that.find(".ui-slider-handle").offset().left;
$( "#sliderValue" )
.val( ui.value )
.css({
"position": "absolute",
"left": offsetLeft
});
},1);
}
});
});
是的,我知道我可以在更改完成后更新滑块,但我尝试实现的设计目标是在用户决定在何处释放拖动动作之前显示值。我已编辑了我的原始答案以满足您的需要。有疑问时-使用timeout;)那是。。。非常狡猾!谢谢