jQuery UI Slider: move the value along (with) the handle

Question

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.

Answer 1

I would just put the labels inside the handles, instead of repositioning them all the time, like in this answer: https://stackoverflow.com/a/7431057/1250436

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: 'slow',
    create: function() {
        $('#min').appendTo($('#slider a').get(0));
        $('#max').appendTo($('#slider a').get(1));
    },
    slide: function(event, ui) { $(ui.handle).find('span').html('$' + ui.value); }
});

Update

This doesn't work in Chromium for Linux. A strange gfx error occurs.

See the working demo: http://jsfiddle.net/ohcibi/RvSgj/2/