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

You have a lot of redundant code. Perhaps it would be a better approach to implement a function like:

function resize(factor) {
   // do the image resizing here and adjust all controls accordingly
}

and then call this function from the other ones:

function zoomIn() {
    resize(1.05);
}

// etc...

This way, you make sure, that image and controls are in a consistent state every time. You can manipulate the slider-position with $("#slider-vertical").slider('value', newposition); (you will have to calculate newposition before)

Answer 2

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

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

FIDDLE