16

我在页面中使用了 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 ]);
        }
});
4

6 回答 6

24

您可以使用.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/。

于 2011-09-15T12:45:26.800 回答
7

我只是将标签放在手柄内，而不是一直重新定位它们，就像在这个答案中一样：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/

于 2013-04-02T02:52:30.177 回答
2

我追求同样的目标，我决定使用 Bootstrap 的工具提示。你可以试试这个 JSFiddle上的代码。

$('#slider').slider({
    range: true,
    min: -60,
    max: 60,
    values: [ init_start_at, init_end_at ],
    slide: function(event, ui) {
        // Allow time for exact positioning
        setTimeout( function(){
            $(ui.handle).attr('title', ui.value + '°C').tooltip('fixTitle').tooltip('show');
        }, 5);
    },
    create: function( event, ui ) {
        var target = $(event.target);
        var handles = $(event.target).find('a');
        var container, wait;

        // Wait for the slider to be in position
        (wait = function() {
            if ((container = target.parents('.content')).length != 0) {
                handles.eq(0).tooltip({animation: false, placement: 'top',trigger: 'manual', container: container, title: init_start_at + ' °C'}).tooltip('show');
                handles.eq(1).tooltip({animation: false, placement: 'bottom',trigger: 'manual', container: container, title: init_end_at + ' °C'}).tooltip('show');
            } else {
                setTimeout( wait, 50 );
            }
        })();
    }
});

希望它可以帮助某人。

于 2014-02-18T10:10:22.953 回答
2

change => 此事件在幻灯片停止时触发，或者如果值以编程方式更改（通过 value 方法）。接受参数事件和用户界面。使用 event.originalEvent 来检测值是由鼠标、键盘还是以编程方式更改。使用 ui.value（单柄滑块）获取当前句柄的值，$(this).slider('values', index) 获取另一个句柄的值。

http://docs.jquery.com/UI/Slider#event-change

于 2012-06-12T12:19:06.987 回答
2

通过包含引导工具提示可以创建一个漂亮的滑块。这是使用引导工具提示的滑块的更新版本。http://jsfiddle.net/ykay/jL044k1c/

function slide(event, ui) {
    setTimeout(function () {
        $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show');
    }, 0);
}
function create(event, ui, start, end) {
    var handles = $(event.target).find('span');
    handles.eq(0).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(0), title: start}).tooltip('show');
    handles.eq(1).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(1), title: end}).tooltip('show');
}
$('#slider').slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function (event, ui) {
        slide(event, ui)
    },
    create: function (event, ui) {
        create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
    }
});
于 2015-08-19T11:16:59.383 回答
1

您可以在以下示例中的 jQyeryUI 滑块页面的官方文档中轻松找到它

http://jqueryui.com/slider/#custom-handle

于 2017-03-24T08:50:03.720 回答