resetting jquery ui slider handle position

Question

i have a situation with jquery ui slider. i have an image in a div with overflow hidden that can be zoomed and panned around inside the div. the slider controls the zooming in and out of the image, the problem is that if i click on reset, or change image, the handler won't go back to its initial position (in the middle of the slider).

following this live example: http://jsfiddle.net/omegaiori/QWfHE/3/embedded/result/ zoom IN to the max size using the slider, then hit the reset button. what happens is the image gets shrinked back to it's original size, but can't be zoomed in again.

here's the function for the slider:

    $(function () {
        $("#slider-vertical").slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 1000,
            value: 500,
            slide: function (event, ui) {
                var prevVal = $("#amount").val();
                var newVal = ui.value;
                if (prevVal > newVal) {
                    zoomOut();
                } else {
                    zoomIn();
                }

                $("#amount").val(ui.value);
            }
        });
        $("#amount").val($("#slider-vertical").slider("value"));
    });

i would need that everytime my conditions change (i change the picture, i hit reset or fit buttons), the handle of the jquery ui slider goes back where it belongs.. in the center of the slider :)

can anybody help me please? that would be great :)

Answer 1

Set the value when the reset button is clicked with this line:

$("#slider-vertical").slider('value', 500);

FIDDLE