jQuery UI Slider:沿着(连同)句柄移动值 [英] jQuery UI Slider: move the value along (with) the handle

问题描述

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

I used the jQuery UI slider component in my page to set a range of prices. I can also use their ui.values[] to set and show the new values in other divs.

我怎样才能看到句柄下的新值.IE.如果我移动了句柄为 100 美元，我想在该句柄正下方设置100 美元"文本.

How can I make to see the new value under the handle. I.e. if I moved the handle to $100, I want to set the "$100" text right under that handle.

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

BTW, I use the range version - to set a range of prices, so I got TWO handles on my slider (min & max).

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 ]);
        }
});

推荐答案

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

You may use the .position utility function from jQuery UI to position the labels:

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

这篇关于jQuery UI Slider:沿着(连同)句柄移动值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！