javascript - Jquery Range slider with tooltip

Question

I am using Jquery Ui with range slider (2 handles on sliders) to filter minimum and maximum values. However, any idea how to add tooltip for both handle, since the slider itself does not support tooltip with slider.

Answer 1

.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();
    });

Answer 2

加载滑块后，您可以简单地在手柄上创建一个工具提示小部件

$('.ui-slider-handle').tooltip();