Question

I have a problem with jQuery UI
Here is example:
http://jsfiddle.net/zFsZV/7/
When you move slider, black ‘progress bar’ move exactly same(they have same width), but when you move back slider, black div is one step forward.
Is it possible to fix it somehow? I would like to have black div on same level like slider

Answer 1

This only way I can see how to get this to work is to set a timeout in javascript which updates the position based on the .ui-slider-range width.

Check out this fiddle.

$(document).ready(function() {

    $('#slider').slider({
        range: "min",
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function(event, ui){   
            console.log(ui);
            console.log(ui.handle.attributes[2].value);
            setTimeout(setPosition, 10);            
        }
    })
    $('#slider').slider('value');

});
function setPosition(){
    $('.color').css('width', $('.ui-slider-range').width());
}

Through inspecting the ui object which you can access in the slide event, the position of the element seems to always be set after the event takes place, which means you cannot actually directly set the correct width/left position. If you look at my example though, setting a timeout means that the correct position is set.