jQuery UI Range Slider - 每个手柄的工具提示

Question

我使用 jQuery Range 滑块让用户选择一天中的时间范围（即 10:00 - 18:00）。

目前一切正常，我的输出显示在文本框中，但这并不理想。我希望每个手柄都有一个单独的工具提示，分别显示 2 个值，并在拖动手柄时跟随手柄。如果做不到这一点，我可以把时间放在滑动手柄本身上。

我的问题是 - 如何定位特定句柄？它们由 jQuery 动态创建，并且仅由类定义，因此我不知道如何将 div 链接到特定句柄。

我在这里进行了搜索，发现了一些类似的问题，但没有真正回答这个问题。

另外，我不想使用插件。我知道存在一两个，但由于这种情况只发生在网站上的一个地方，我宁愿不必包含一个应该相当简单的文件（即使它打败了我：P）

Answer 1

我知道这有点旧，但我认为其他人可能会找到我感兴趣的解决方案（或者至少告诉我为什么它是垃圾）。

我基本上使用 JQuery 在用于滑块手柄的 a 元素内插入一个 span 元素。每次使用滑块的 change 事件移动手柄时，span 的内容都会更新。跨度本身使用 css 进行样式设置，因此仅当将鼠标悬停在手柄上并且略高于手柄本身时才会显示。所以它看起来像这样：

所以，我的滑块被添加到带有 slider- 的所有元素中range 类如下：

$(".slider-range").each(function () {
    $(this).slider({
        range: true,
        animate: true,
        min: 1,
        max: 10,
        values: [lower, upper],
        change: function () {

            // get slider values
            var lower = $(this).slider("values", 0);
            var upper = $(this).slider("values", 1);

            // update spans with slider values
            $(this).children("a.ui-slider-handle").first().children("span").html(lower);
            $(this).children("a.ui-slider-handle").last().children("span").html(upper);
        }
    });

    // add the span element to the handle
    $(this).children("a.ui-slider-handle").html("<span class='Slider_Value'></span>");
});

然后 css 如下所示：

a.ui-slider-handle span.Slider_Value{
    position: absolute;
    top: -35px;
    left: -2px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #E6E6E6;
    background-color: white;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    display: none;
}

a.ui-slider-handle:hover span.Slider_Value{
    display: block;
}   

就这样！享受

Answer 2

如果您只需要独立访问每个值，您可以附加 slide 函数来单独更新每个目标。此外，如果您希望能够分别更改这 2 个目标中每个目标的滑块，则可以使用 values 方法轻松实现。

编辑

我想我有点误解了你的问题。您可以使用一些选择器获取处理程序及其位置，例如：

var offset1 = $(this).children('.ui-slider-handle').first().offset();
var offset2 = $(this).children('.ui-slider-handle').last().offset();

下面是一个示例，说明如何使用该信息在拖动时在这些项目上显示工具提示。

示例： http://jsfiddle.net/niklasvh/vW7vy/

Answer 3

很好的努力，但效果并不完美。当您第一次将鼠标悬停在手柄上时。它不显示默认值。尝试使用相同的 CSS 样式。

$(function() {
            var tooltip = function(sliderObj, ui){
                val1            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 0) +'</div>';
                val2            = '<div id="slider_tooltip">'+ sliderObj.slider("values", 1) +'</div>';
                sliderObj.children('.ui-slider-handle').first().html(val1);
                sliderObj.children('.ui-slider-handle').last().html(val2);                  
            };

            $( "#slider-range" ).slider({
              range: true,
              min: 0,
              max: 500,
              values: [ 75, 300 ],
              slide: function( e, ui ) {
                tooltip($(this),ui);                    
              },              
              create:function(e,ui){
                tooltip($(this),ui);                    
              }
            });
        });