Question

我有一个类似于this StackOverflow question的设计目标，关于向JQuery滑块添加标签，该滑块在用户拖动滑块时显示滑块的当前值。我对这些答案的问题是，当滑块即将移动到新位置时会触发slide事件，并为ui对象提供新值。嗯，好，但滑块的唯一位置，我可以找到一种方法来获取是旧的，而不是新的位置。如果滑块上有足够的步骤，这并不是很明显，但如果我减少了步数，就可以看到标签出现在幻灯片处理以前的位置旁边。

我已经从其他问题更新了jsFiddle以说明问题：http://jsfiddle.net/mcuf6/2/

所以，tl; dr：在用户拖动手柄时，如何通过在幻灯片事件期间获取滑块手柄的最终位置来避免在绘制滑块标签时出现延迟？

Answer 1

编辑：这个小黑客应该完全按照您的需要进行操作

$(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);
        }
    });
});

http://jsfiddle.net/mcuf6/6/

JQuery滑块：滞后在句柄旁边添加标签

1 个答案: