修改

Question

我从这里得到同样的问题： jQuery UI Slider: move the value along (with) the handle

“我在页面中使用了jQuery UI滑块组件来设置价格范围。我还可以使用他们的ui.values []来设置和显示其他div中的新值。如何查看句柄下的新值。即如果我将句柄移动到100美元，我想在该句柄下设置“$ 100”文本。“

有答案（http://jsfiddle.net/william/RSkpH/1/），但我在滑块中有“animate：”slow“”功能有问题。帮助如何使用句柄为值设置动画。移动后我的滑块会留下垃圾：（http://data2.floomby.com/files/share/2_4_2013/6TZ1DOmbk2pRqvCF0nfVw.jpg

谢谢

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

Answer 1

您应该使用change回调而不是slide回调。只要滑块的值发生变化，change就会被触发，这就是你需要的。

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

修改

问题是slider提供的所有事件都会在动画结束前触发。这使得实际移动句柄下方的标签有点棘手，因为在句柄移动之前设置了值，并且当句柄到达其最终位置时没有回调以捕获被触发的内容。

我发现将标签放在手柄元素中会更方便。像这样，他们将被自己保持在手柄下方。看到这个小提琴：http://jsfiddle.net/ohcibi/RvSgj/2/

更新

最后一个小提琴似乎不适用于Chromium for Linux，发生了一个奇怪的gfx错误（请参阅截图评论）。 Firefox 19.0.2，Opera 12.14和最新的Chrome for Windows正在渲染它。

jQuery UI Slider：在Chrome中滞后

1 个答案:

修改

更新