带工具提示的Jquery Range滑块

Question

我正在使用带范围滑块（滑块上的2个手柄）的Jquery Ui来过滤最小值和最大值。但是，任何想法如何为两个句柄添加工具提示，因为滑块本身不支持滑块工具提示。

Answer 1

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

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

Answer 2

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

这里是jsFiddle example。

这也是本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(); 
    });