jQuery滑塊氣泡

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。這是醜陋的，但功能:)我會幫助它看起來像一個泡沫，但我不是一個圖形傢伙。希望這會讓你開始。

編輯 - 我注意到CSS需要關閉動畫才能正確跟蹤滑塊本身的點擊次數（又稱不拖動）。更新代碼和演示以反映需要的更改以跟蹤滑塊欄點擊和拖動。

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

你可以在初始化或加載時加載下面顯示的塊（這會用初始值繪製滑塊）。我不確定這是否是最好的方式，但它對我有用。

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