curseur jQuery bulle

Question

Est-ce que quelqu'un sait comment obtenir une bulle apparaissent au-dessus du curseur de contrôle jQuery lorsque l'utilisateur déplace le pointeur de curseur? Idéalement, j'aimerais que les deux pointeurs d'un curseur de plage aient leur propre bulle indépendante. Les bulles montreront de manière dynamique la valeur actuellement sélectionnée du curseur orienté par l'utilisateur. C'est difficile!

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

Je mis une démo here. C'est moche, mais fonctionnel :) J'aiderais à le faire ressembler à une bulle, mais je ne suis pas vraiment un mec graphique. J'espère que cela vous a aidé à démarrer. Éditer - J'ai remarqué que l'animation doit être désactivée pour que CSS puisse suivre correctement les clics dans le curseur lui-même (alias pas glisser). Mise à jour du code et de la démo pour refléter les modifications nécessaires pour suivre les clics et les glissements de la barre de défilement.

Answer 2

est ici une façon plus simple:

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

Mon problème est d'obtenir la valeur initiale montrant dans la bulle, un problème que je n'ai pas encore à résoudre. Toute aide est appréciée.

Answer 3

Vous pouvez charger ce bloc ci-dessous sur init ou sur load (cela affichera le curseur avec la valeur initiale). Je ne suis pas sûr si c'est la meilleure façon, mais cela a fonctionné pour moi.

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