jQuery slider bubble

Question

Does anyone know how to get a bubble to appear above the jQuery slider control when the user is moving the slider pointer? Ideally I'd like to have both pointers in a range slider have their own independent bubble. The bubbles will dynamically show the currently selected value of the slider pointer being moved by the user. It's a tough one !

Many thanks.

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

I put up a demo here. It's ugly, but functional :) I would help make it look like a bubble, but I'm not much of a graphic guy. Hope this gets you started.

Edit - I noticed the animation needs to be turned off for CSS to properly track clicks in the slider itself(aka not drag). Updated code and demo to reflect needed changes to track both slider bar clicks and dragging.