jquery - jQuery 滑块气泡

Question

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

Answer 1

这是一个更简单的方法：

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

我的问题是让初始值显示在气泡中，这是我尚未解决的问题。

Answer 2

..

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

CSS

#value1 { position:relative; }
#value2 { position:relative; }

文...

    $("#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 才能正确跟踪滑块本身的点击（也就是不拖动）。更新了代码和演示，以反映跟踪滑块点击和拖动所需的更改。

Answer 3

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

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