jQuery slider bubble

Question

ユーザがスライダポインタを動かしているときにjQueryスライダコントロールの上にバブルを表示する方法を知っている人はいますか？理想的には、範囲スライダ内の両方のポインタに独自のバブルがあるようにしたいと思います。バブルは、ユーザが移動しているスライダポインタの現在選択されている値を動的に表示します。 これは厳しいものです！

Answer 1

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を設置しました。それは醜いですが、機能的です：私はそれがバブルのように見えるようにするのに役立ちますが、私はグラフィックの男の多くではありません。これはあなたが始めることを願っています。

編集 - スライダー自体のクリックを適切にトラッキングするにはアニメーションをオフにする必要があることに気付きました。スライダバーのクリックとドラッグの両方を追跡するために必要な変更を反映するようにコードとデモが更新されました。

Answer 2

はここで簡単な方法です：

$('#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 3

このブロックをinitまたはload（この値はスライダに初期値でペイントします）にロードできます。これが最善の方法であるかどうかはわかりませんが、それは私のために働いていました。

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