JQuery Range slider with tooltip

Question

I use Jquery Ui with a range slider (2 knobs on the sliders) to filter the minimum and maximum values. However, any idea of ​​adding a tooltip for both descriptors, since the slider itself does not support a tooltip with a slider.

Answer 1

.ui-slider-handle class has two elements when used as a range. Therefore, you must use the .first() and .last() methods .first() to get the min and max range handlers.

Here is a jsFiddle example .

This is a modified version of the answer to 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

After the slider has been loaded, you can simply create a tooltip widget on descriptors

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