jQuery UI滑块：Chrome中的滞后

我在这里有同样的问题：

“我在页面中使用jQuery UI slider组件来设置价格范围。我还可以使用它们的UI.values[]来设置和显示其他div中的新值。 我怎样才能看到句柄下的新值。例如，如果我将句柄移动到$100，我想将“$100”文本设置在该句柄的正下方。”

有答案（），但我对滑块中的“animate:“slow”函数有问题。帮助如何使用handle设置值的动画。 我的滑块在移动后会留下垃圾：（

谢谢

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: "slow",
    slide: function(event, ui) {
        var delay = function() {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html('$' + ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, 10"
            });
        };
        // wait for the ui.handle to set its position<br>
        setTimeout(delay, 5);
    }
});

$（“#滑块”）.滑块({
范围：对，
最低:100,，
最高：500，
步骤：10，
值：[100500]，
动画：“慢”，
幻灯片：功能（事件、用户界面）{
变量延迟=函数（）{
var handleIndex=$（ui.handle.data（'index.uiSliderHandle'）；
var label=handleIndex==0？'#min'：'#max'；
$（label.html（“$”+ui.value）.position({
我的‘中上’，
在‘中底’，
of:ui.handle，
偏移量：“0，10”
});
};
//等待ui.handle设置其位置

设置超时（延迟，5）；
}
});

您应该使用

change

回调，而不是

幻灯片

回调。

change

会在滑块值更改时触发，这正是您需要的

//...
change: function(event, ui) {
    var delay = function() {
    //...

编辑 问题是

slider

提供的所有事件都是在动画完成之前触发的。这使得在句柄移动之前设置值，并且当句柄到达其最终位置时，没有触发用于捕获的回调，因此实际移动句柄下方的标签有点棘手

我发现将标签放在手柄元素内更方便。这样，标签将由它们自己保存在手柄下方。参见此提琴：

更新

---

最后一个提琴在Chromium for Linux中似乎不起作用，出现了一个奇怪的gfx错误（请参见屏幕截图注释）。Firefox 19.0.2、Opera 12.14和最新的Chrome for Windows都表现良好。

动画：“慢”有什么问题吗？单击滑块时，值保持在相同的位置，仅当slide by Handle已经尝试了滑块时才移动。请，您可以显示演示吗？可能我有点问题，但我发现这很奇怪。我只是在firefox、opera上尝试过，在windows上使用chrome时才这样做。这只发生在chrome for linux o上我有最新的Chrome Windows。我的滑块在移动后会留下垃圾：（也只在Chrome中，在Opera中看起来不错）。