jQuery UI Slider:沿着句柄移动值

Question

我在页面中使用了jQuery UI滑块组件来设置一系列价格.我也可以使用他们的ui.values []来设置和显示其他div中的新值.

如何查看句柄下的新值.即如果我将句柄移动到100美元,我想在该句柄下设置"$ 100"文本.

顺便说一句,我使用范围版本 - 设置一系列价格,所以我的滑块上有两个手柄(最小和最大).

var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
        range: true,
        min: minPriceRange,
        max: maxPriceRange,
        step: 10,
        values: [ minPriceRange, maxPriceRange ],
        slide: function( event, ui ) {
            ("#fromRangeText").text("$" + ui.values[ 0 ]);
            $("#toRangeText").text("$" + ui.values[ 1 ]);
        }
});

Answer 1

您可以使用.positionjQuery UI中的实用程序功能来定位标签:

$("#slider").slider({
    ...
    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
        setTimeout(delay, 5);
    }
});

看到它的行动:http://jsfiddle.net/william/RSkpH/1/.

Answer 2

我只是将标签放在手柄内,而不是一直重新定位它们,就像这个答案:https://stackoverflow.com/a/7431057/1250436

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: 'slow',
    create: function() {
        $('#min').appendTo($('#slider a').get(0));
        $('#max').appendTo($('#slider a').get(1));
    },
    slide: function(event, ui) { $(ui.handle).find('span').html('$' + ui.value); }
});

更新

这在Chromium for Linux中不起作用.发生奇怪的gfx错误.

查看工作演示:http://jsfiddle.net/ohcibi/RvSgj/2/