jQuery Slider bubble

Question

Weiß jemand, wie man eine Blase über dem jQuery-Schieberegler erscheinen lässt, wenn der Benutzer den Schieberegler bewegt? Idealerweise hätte ich gerne, dass beide Zeiger in einem Bereich-Schieberegler ihre eigene unabhängige Blase haben. Die Blasen zeigen dynamisch den aktuell ausgewählten Wert des Schiebereglers an, der vom Benutzer bewegt wird. Es ist ein harter!

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

ich here eine Demo setzen. Es ist hässlich, aber funktional :) Ich würde helfen, es wie eine Blase aussehen zu lassen, aber ich bin nicht viel von einem Grafik-Typ. Hoffe, das wird dich beginnen.

Bearbeiten - Ich habe festgestellt, dass die Animation deaktiviert werden muss, damit CSS die Klicks im Schieberegler (nicht Drag) korrekt verfolgen kann. Der Code und die Demo wurden aktualisiert, um die erforderlichen Änderungen für die Verfolgung der Schiebereglerklicks und des Ziehens wiederzugeben.

Answer 2

Hier ist ein einfacher Weg:

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

Mein Problem ist, den Anfangswert in der Blase zeigt zu bekommen, ein Problem, das ich noch zu lösen. Jede Hilfe wird geschätzt.

Answer 3

Sie können diesen Block bei init oder beim Laden laden (dadurch wird der Schieberegler mit dem Anfangswert angezeigt). Ich bin mir nicht sicher, ob das der beste Weg ist, aber es hat für mich funktioniert.

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