CODEWITHSUNDEEP
javascriptjquery
William Tio Wee Leong
William Tio Wee Leong

Reputation: 473

Jquery Range slider with tooltip

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.

Upvotes: 5

Views: 4970

Answers (2)

mkturkeri
mkturkeri

Reputation: 111

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

Upvotes: 1

slash197
slash197

Reputation: 9034

After the slider has been loaded you could simply create a tooltip widget on the handles

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

Upvotes: 0

Related Questions