-1

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

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

有答案（http://jsfiddle.net/william/RSkpH/1/），但我对滑块中的“动画：”慢“”功能有问题。帮助如何使用句柄为值设置动画。我的滑块在移动后会留下垃圾:( 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);
    }
});
4

1 回答 1

0

你应该使用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 和最新的 Windows 版 Chrome 都在渲染它。

于 2013-04-02T00:41:22.770 回答