jquery-ui - jQuery UI slider : move the value along (with) the handle

Question

我在页面中使用了 jQuery UI slider 组件来设置价格范围。 我还可以使用他们的 ui.values[] 在其他 div 中设置和显示新值。

我怎样才能看到句柄下的新值。 IE。如果我移动了 句柄为 $100，我想在该句柄下方设置“$100”文本。

顺便说一句，我使用范围版本 - 设置价格范围，因此我的 slider 上有两个 handle (最小和最大)。

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

您可以使用 jQuery UI 中的 .position 实用函数来定位标签:

$("#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/ .