Question

I have a similar design goal to this StackOverflow question about adding a label to a JQuery slider that shows the current value of the slider while the user is dragging the slider. The problem I have with those answers is that the slide event triggers when the slider is about to move to the new location, and provides a ui object with the new value. Well and good, but the only position of the slider that I can find a way to get hold of is the old, not new, location. With enough steps on the slider this isn’t really noticeable, but if I reduce the number of steps you can see that the label appears next to where the slide handle used to be.

I’ve updated the jsFiddle from the other question to illustrate the problem: http://jsfiddle.net/mcuf6/2/

So, tl;dr: how can I avoid lag in drawing a slider label while the user is dragging the handle, by getting the final location of the slider handle during a slide event?

Answer 1

EDIT:
This little hack should do exactly what you need

$(document).ready(function() {
    $("#slider").slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        range: 'min',
        slide: function( event, ui ) {
            var that = $(this);
            setTimeout(function() {
            var offsetLeft = that.find(".ui-slider-handle").offset().left;
            $( "#sliderValue" )
                .val( ui.value )
                .css({
                    "position": "absolute",
                    "left": offsetLeft
                });
        },1);
        }
    });
});​

http://jsfiddle.net/mcuf6/6/