Using offset and jQuery slider

Question

I am using offset() with the jquery slider and I am so close to achieving my goal, but it is off slighty. I have it animating using animate to the top CSS coordinates but if you check out: http://www.ryancoughlin.com/demos/interactive-slider/index.html - you will see what it is doing. My goal is to have it fadeIn() and display the value to the right of the handle. i know I can offset the text from the handle using a simple margin:0 0 0 20px.

The part is aligning #current_value to the right of the handle. Thoughts? var slide_int = null;

$(function(){

 $("h4.code").click(function () {
  $("div#info").toggle("slow");
 });

 $('#slider').slider({
  animate: true,
  step: 1,
  min: 1,
  orientation: 'vertical',
  max: 10,
  start: function(event, ui){
   $('#current_value').empty();
   slide_int = setInterval(update_slider, 10); 
  },
  slide: function(event, ui){
   setTimeout(update_slider, 10);  
  },
  stop: function(event, ui){
   clearInterval(slide_int);
      slide_int = null;
  }
 }); 
});
function update_slider(){
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');

    $('#current_value').text('Value is '+value).css({top:offset.top });
    $('#current_value').fadeIn();

}

I know I could use margin to offset it to match, but is there a better way?

Thanks,

Ryan

Answer 1

You just need to use a different event. "slide" fires before the handle is moved so your value is ending up at the previous handle position. Try the "change" event and see if that gets you there.

Answer 2

There are two problems. The first, like Prestaul said, the slider event fires at the "beginning" of the move, not the end, so the offset is wrong. You could fix this by setting a timeout:

$(function(){
    slide: function(event, ui){
        setTimeout(update_slider, 10);
    },
    ...
});
function update_slider()
{
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');
    $('#current_value').text('Value is '+value).animate({top:offset.top }, 1000 )
    $('#current_value').fadeIn();
}

The second problem is that the move is instantaneous, while the animation is not, meaning that the label will lag behind the slider. The best I've come up with is this:

var slide_int = null;

$(function(){
    ...
    start: function(event, ui){
        $('#current_value').empty();
        // update the slider every 10ms
        slide_int = setInterval(update_slider, 10);
    },
    stop: function(event, ui){
        // remove the interval
        clearInterval(slide_int);
        slide_int = null;
    },
    ...
});

function update_slider()
{
    var offset = $('.ui-slider-handle').offset();
    var value = $('#slider').slider('option', 'value');

    $('#current_value').text('Value is '+value).css({top:offset.top });
    $('#current_value').fadeIn();
}

By using css instead of animate, you keep it always next to the slider, in exchange for smooth transitions. Hope this helps!