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

HTML ..

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

CSS

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

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

我制作了一个演示here。这很难看，但功能齐全:)我会帮助它看起来像一个泡泡，但我不是一个图形人。希望这能让你开始。

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

Answer 3

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

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

jQuery滑块泡泡

3 个答案: