带工具提示的Jquery范围滑块

Jquery Range slider with tooltip

本文关键字：范围 Jquery 工具提示      更新时间：2023-09-26

我使用Jquery Ui和范围滑块（滑块上有两个句柄）来过滤最小值和最大值。但是，由于滑块本身不支持带有滑块的工具提示，因此不知道如何为两个控制柄添加工具提示。

.ui-slider-handle类在用作范围时有两个项。因此，必须正确使用.first()和.last()方法才能获得最小和最大范围处理程序。

下面是jsFiddle示例。

这是这个问题答案的修改版本：

    var tooltipmin = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();
var tooltipmax = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();
var slideritem = $("#slider").slider({
    values: [350, 500],
    min: 0,
    max: 1000,
    step: 50,
    range: true,
    slide: function(event, ui) {
        tooltipmin.text(ui.values[0]);
        tooltipmax.text(ui.values[1]);
    },
    change: function(event, ui) {
        tooltipmin.text(ui.values[0]);
        tooltipmax.text(ui.values[1]);
    }
});
slideritem
    .find(".ui-slider-handle")
    .first()
    .append(tooltipmin)
    .hover(function() {
        tooltipmin.show();
        tooltipmax.show();
    }, function() {
        tooltipmin.hide();
        tooltipmax.hide();
    });
slideritem
    .find(".ui-slider-handle")
    .last()
    .append(tooltipmax)
    .hover(function() {
        tooltipmin.show();
        tooltipmax.show();
    }, function() {
        tooltipmin.hide();
        tooltipmax.hide();
    });

加载滑块后，只需在手柄上创建一个工具提示小部件

$('.ui-slider-handle').tooltip();
相关文章：