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 class has two items when used as a range. Therefore you must use .first() and .last() methods properly in order to get min and max range handlers.

Here is the jsFiddle example .

This is the modified version of the answer of this question :

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