JQuery slider scrolling a div when dragging?

Question

I've got a basic slider and an overflow div that I offset based on the slider. To do this I use this;

slide: function(e, ui) {
            $("#myDiv").animate({left: ui.value * -1}, 500);
        },
        stop: function(e, ui) {
            $("#myDiv").animate({left: ui.value * -1}, 500);
        },
        change: function(e, ui) {
            $("#myDiv").css({left: ui.value * -1});
        }

This works great if I click somewhere on the slider or use the mouse wheel/arrow keys. However, if I drag the slider left and right and drop it somewhere, the div keeps doing it's scrolling thing, jumping back and forth. It doesn't really 'snap' once i release the mouse.

Is there some cleaner way to do this so that it does in fact track?

Answer 1

just modifying your code

slide: function(e, ui) {
        // here replace the delay / remove animation and place div in exact position
        $("#myDiv").animate({left: ui.value * -1}, 0);
    },
    stop: function(e, ui) {
        $("#myDiv").animate({left: ui.value * -1}, 500);
    },
    change: function(e, ui) {
        $("#myDiv").css({left: ui.value * -1});
    }