jQuery UI Slider: lag in Chrome

Question

I have the same question from here: jQuery UI Slider: move the value along (with) the handle

"I used the jQuery UI slider component in my page to set a range of prices. I can also use their ui.values[] to set and show the new values in other divs. How can I make to see the new value under the handle. I.e. if I moved the handle to $100, I want to set the "$100" text right under that handle."

There was answer(http://jsfiddle.net/william/RSkpH/1/), but i have problem with "animate: "slow"" function in slider. Help how to animate values with handle too. And my slider leave trash after moving :( http://data2.floomby.com/files/share/2_4_2013/6TZ1DOmbk2pRqvCF0nfVw.jpg

Thanks

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: "slow",
    slide: function(event, ui) {
        var delay = function() {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html('$' + ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, 10"
            });
        };
        // wait for the ui.handle to set its position<br>
        setTimeout(delay, 5);
    }
});

Answer 1

You should use the change callback instead of the slide callback. change gets fired whenever the value of the slider changes, which is what you need.

//...
change: function(event, ui) {
    var delay = function() {
    //...

Edit

The problem is that all the events that slider provides are fired before the animation has finished. This makes it kinda tricky to actually move the label below the handle as the value gets set before the handle moves and when the handle has reached its final position no callback to capture that is triggered.

I find it way more convenient to put the labels inside the handle elements. Like this they will be kept below the handles by them self. See this fiddle: http://jsfiddle.net/ohcibi/RvSgj/2/

Update

The last fiddle seems not to work in Chromium for Linux, a strange gfx error occurs (see comments for screenshot). Firefox 19.0.2, Opera 12.14 and the latest Chrome for Windows are rendering it fine though.