$(function() {

$("#slider").slider(
    { change: handleChange,
orientation: "vertical",

        slide: handleSlide,
        min: -100,
    max: 0 });

$("#slider_side").slider(
    { change: handleChange_side,
orientation: "vertical",

        slide: handleSlide_side,
        min: -100,
    max: 0 });

});

function handleChange(e, ui) {
    var maxScroll = $("#scroller")
      .attr("scrollHeight") -
      $("#scroller").height();
    $("#scroller")
      .animate({ scrollTop: -ui.value *
     (maxScroll / 100)
    }, 1000);

}

function handleSlide(e, ui) {
    var maxScroll = $("#scroller")
      .attr("scrollHeight") -
      $("#scroller").height();
    $("#scroller")
      .attr({ scrollTop: -ui.value
        * (maxScroll / 100)   });

}

function handleChange_side(e, ui) {
    var maxScroll = $("#scroller_side")
      .attr("scrollHeight") -
      $("#scroller_side").height();
    $("#scroller_side")
      .animate({ scrollTop: -ui.value *
     (maxScroll / 100)
    }, 1000);

}

function handleSlide_side(e, ui) {
    var maxScroll = $("#scroller_side")
      .attr("scrollHeight") -
      $("#scroller_side").height();
    $("#scroller_side")
      .attr({ scrollTop: -ui.value
        * (maxScroll / 100)   });

}