$(document).ready(function(){
  $(".slider").slider({
    animate: true,
    handle: ".handle",
    change: handleSliderChange,
    slide: handleSliderSlide
  });
});
function handleSliderChange(e, ui)
{
  var maxScroll = $(".scrollWrapper").attr("scrollWidth") - $(".scrollWrapper").width();
  $(".scrollWrapper").animate({scrollLeft: ui.value * (maxScroll / 100) }, 500);
}

function handleSliderSlide(e, ui)
{
  var maxScroll = $(".scrollWrapper").attr("scrollWidth") - $(".scrollWrapper").width();
  $(".scrollWrapper").attr({scrollLeft: ui.value * (maxScroll / 100) });
}