Javascript 带工具提示的Jquery范围滑块

我使用jqueryui和范围滑块（滑块上的两个句柄）来过滤最小值和最大值。但是，由于滑块本身不支持带有滑块的工具提示，因此您知道如何为两个手柄添加工具提示吗。

加载滑块后，您只需在手柄上创建工具提示小部件即可

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

---

.ui滑块句柄

类用作范围时有两项。因此，必须正确使用

.first（）

和

.last（）

方法才能获得最小和最大范围处理程序

这是你的电话号码

这是此问题答案的修改版本：

var-tooltipmin=$（''）.css({
位置：'绝对'，
前-25，
左：-10
}).hide（）；
var tooltipmax=$（''）.css({
位置：'绝对'，
前-25，
左：-10
}).hide（）；
var slideritem=$（“#滑块”）.滑块({
值：[350500]，
分:0,，
最高：1000，
步骤：50，
范围：对，
幻灯片：功能（事件、用户界面）{
tooltipmin.text（ui.values[0]）；
tooltipmax.text（ui.values[1]）；
},
更改：功能（事件、用户界面）{
tooltipmin.text（ui.values[0]）；
tooltipmax.text（ui.values[1]）；
}
});
幻灯片
.find（“.ui滑块句柄”）
.first（）
.append（tooltipmin）
.hover（函数（）{
tooltipmin.show（）；
tooltipmax.show（）；
}，函数（）{
tooltipmin.hide（）；
tooltipmax.hide（）；
});
幻灯片
.find（“.ui滑块句柄”）
.last（）
.append（ToolTimax）
.hover（函数（）{
tooltipmin.show（）；
tooltipmax.show（）；
}，函数（）{
tooltipmin.hide（）；
tooltipmax.hide（）；
});

您能提供一个JSFIDLE吗？slider需求的可能副本是使用jquery ui，其中html5 slider可能不适用于某些浏览器。。。。jQueryUI滑块是这样的。。。但是工具提示加载了吗？你的意思是在jquery ui滑块初始化之后？加载和初始化是一样的

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