Question

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

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

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

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

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

Answer 1

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

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

slider value tooltip

所以，我的滑块被添加到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函数来单独更新每个目标。此外，如果您希望能够单独更改这两个目标中的每个目标的滑块，那么使用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);                    
              }
            });
        });

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

3 个答案: