jQuery UI Slider：沿着（连同）句柄移动值

Posted 2023-02-18

【中文标题】jQuery UI Slider：沿着（连同）句柄移动值

【英文标题】：jQuery UI Slider: move the value along (with) the handle

【发布时间】：2011-11-16 23:23:39

【问题描述】：

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

我怎样才能看到句柄下的新值。 IE。如果我移动了 句柄为 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 ]);
        
);

【参考方案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/。

【讨论】：

这与我的问题相同，如果滑块是在屏幕外创建的，则标签位于手柄上方，而不是下方。添加margin-top：1000px；到您的滑块 CSS 中，您将看到问题。

【参考方案2】：

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

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

【讨论】：

这不是对原始问题的直接回答，但事实证明这正是我所需要的。谢谢！

【参考方案3】：

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

【参考方案4】：

我追求同样的目标，我决定使用 Bootstrap 的工具提示。你可以试试this 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 );
            
        )();
    
);

希望它对某人有所帮助。

【参考方案5】：

可以通过包含引导工具提示来创建一个漂亮的滑块。这是使用引导工具提示的滑块的更新版本。 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))
    
);

【参考方案6】：

你可以在jQyeryUI滑块页面的官方文档中很容易找到它，如下例所示

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