jQuery滑块气泡

有人知道当用户移动滑块指针时，如何在jQuery滑块控件上方显示气泡吗？理想情况下，我希望范围滑块中的两个指针都有各自独立的气泡。气泡将动态显示用户正在移动的滑块指针的当前选定值。 这是一个艰难的时刻

Html

  <div id="value1">&nbsp;</div>
  <div id="value2">&nbsp;</div>
  <div id="slider"></div>

Javscript

    $("#slider").slider({
            animate:false,
            range: true,
        values:[0,400],
        min: 0,
        max: 500,
        step: 1,
        change: function(event, ui) {
            updateValues(event,ui);
        },
        slide: function(event, ui) {
            updateValues(event,ui);
        }
    });

    function updateValues(event, ui)
    {
            var offset1 = $('.ui-slider-handle:first').offset();
            var offset2 = $('.ui-slider-handle:last').offset();
            var value1 = $('#slider').slider('values',0);
            var value2 = $('#slider').slider('values',1);
                        $('#value1').text(value1).css({'left':offset1.left});
                        $('#value2').text(value2).css({'left':offset2.left});
    }

我放了一个演示。它很难看，但很实用：）我想让它看起来像个泡泡，但我不是一个喜欢画画的人。希望这能让你开始

编辑-我注意到需要关闭动画，CSS才能正确跟踪滑块本身中的单击（也称为不拖动）。更新了代码和演示，以反映跟踪滑块单击和拖动所需的更改。

Html

  <div id="value1">&nbsp;</div>
  <div id="value2">&nbsp;</div>
  <div id="slider"></div>

Javscript

    $("#slider").slider({
            animate:false,
            range: true,
        values:[0,400],
        min: 0,
        max: 500,
        step: 1,
        change: function(event, ui) {
            updateValues(event,ui);
        },
        slide: function(event, ui) {
            updateValues(event,ui);
        }
    });

    function updateValues(event, ui)
    {
            var offset1 = $('.ui-slider-handle:first').offset();
            var offset2 = $('.ui-slider-handle:last').offset();
            var value1 = $('#slider').slider('values',0);
            var value2 = $('#slider').slider('values',1);
                        $('#value1').text(value1).css({'left':offset1.left});
                        $('#value2').text(value2).css({'left':offset2.left});
    }

我放了一个演示。它很难看，但很实用：）我想让它看起来像个泡泡，但我不是一个喜欢画画的人。希望这能让你开始

编辑-我注意到需要关闭动画，CSS才能正确跟踪滑块本身中的单击（也称为不拖动）。更新了代码和演示，以反映跟踪滑块单击和拖动所需的更改。

以下是一种更简单的方法：

$('#slider').slider({
  range: true,
  min: 0,
  max: 10,
  values: [0, 10],
  create: function(){
    var handle = jQuery(this).find('.ui-slider-handle');
    var bubble = jQuery('<div class="valuebox"></div>');
    handle.append(bubble);
  },
  slide: function(evt, ui) {
    ui.handle.childNodes[0].innerHTML = ui.value;
  }
});

$（“#滑块”）.滑块({
范围：对，
分:0,，
最高：10，
值：[0,10]，
创建：函数（）{
var handle=jQuery（this.find）（'.ui滑块句柄'）；
var-bubble=jQuery（“”）；
句柄。追加（气泡）；
},
幻灯片：功能（evt、ui）{
ui.handle.childNodes[0]。innerHTML=ui.value；
}
});

我的问题是得到泡沫中显示的初始值，这是一个我尚未解决的问题

这里有一个更简单的方法：

$('#slider').slider({
  range: true,
  min: 0,
  max: 10,
  values: [0, 10],
  create: function(){
    var handle = jQuery(this).find('.ui-slider-handle');
    var bubble = jQuery('<div class="valuebox"></div>');
    handle.append(bubble);
  },
  slide: function(evt, ui) {
    ui.handle.childNodes[0].innerHTML = ui.value;
  }
});

$（“#滑块”）.滑块({
范围：对，
分:0,，
最高：10，
值：[0,10]，
创建：函数（）{
var handle=jQuery（this.find）（'.ui滑块句柄'）；
var-bubble=jQuery（“”）；
句柄。追加（气泡）；
},
幻灯片：功能（evt、ui）{
ui.handle.childNodes[0]。innerHTML=ui.value；
}
});

---

我的问题是得到泡沫中显示的初始值，这是一个我尚未解决的问题

您可以在init或load上加载下面所示的块（这将使用初始值绘制滑块）。我不确定这是否是最好的方法，但它对我很有效

$('#slider').slider({
  range: true,
  min: 0,
  max: 10,
  values: [0, 10]
});

---

您可以在init或load上加载下面所示的块（这将使用初始值绘制滑块）。我不确定这是否是最好的方法，但它对我很有效

$('#slider').slider({
  range: true,
  min: 0,
  max: 10,
  values: [0, 10]
});

使用.position（）而不是.offset（）使用.position（）而不是.offset（）