javascript - 画像をズームする既存のスクリプトに jquery ui スライダーを統合する

Question

オーバーフローが非表示の固定幅の div に画像をズームインおよびズームアウトできるようにするこの JavaScript を実装しました。私は最初に、onclickで含まれる画像の幅を増減する2つの単純なボタン（増加/減少）で実装しました。

私が今やりたいことは、ボタンを垂直方向の jquery ui スライダーに置き換えることですが、その方法はわかりません。

これが私の出発点です：http://jsfiddle.net/omegaiori/QWfHE/embedded/result/

基本的に、ズームイン/ズームアウトのプロパティは次のコードで取得されます。

    function zoomIn() {
    var imgElem = jQuery(".image");
    width = width*1.1;
    height = height*1.1;
    imgElem.css({"width": width + "px", "height": height + "px"});
    imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}

function zoomOut() {
    var imgElem = jQuery(".image");
    width = width/1.1;
    height = height/1.1;
    imgElem.css({"width": width + "px", "height": height + "px"});
    imgElem.draggable("option", {"axis": false, "containment": false}).draggable("enable");
}

誰か助けてくれませんか?? それはとてもクールです:)事前に感謝します