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

HTML..

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

CSS

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

JavaScript...

    $("#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

以下に示すこのブロックは、init またはロード時にロードできます (これにより、スライダーが初期値でペイントされます)。これが最善の方法かどうかはわかりませんが、私にとってはうまくいきました。

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