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

Question

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

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

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

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

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

Answer 1

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

我基本上使用JQuery span在a元素中插入一个元素,该元素用于滑块上的句柄.span每次使用滑块的change事件移动句柄时,都会更新内容.跨度本身使用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;
}   

就这样!请享用