$(document).ready(function(){
  $("#content-slider").slider({
    animate: true,
    change: handleSliderChange,
    slide: handleSliderSlide
  });
  $("#content-slider2").slider({
    animate: true,
    change: handleSliderChange2,
    slide: handleSliderSlide2
  });
});

function handleSliderChange(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollWidth") -
                  $("#content-scroll").width();
  $("#content-scroll").animate({scrollLeft: ui.value *
     (maxScroll / 100) }, 1000);
}

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

function handleSliderChange2(e, ui)
{
  var maxScroll = $("#content-scroll2").attr("scrollWidth") -
                  $("#content-scroll2").width();
  $("#content-scroll2").animate({scrollLeft: ui.value *
     (maxScroll / 100) }, 1000);
}

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

/*
// execute your scripts when DOM is ready. this is a good habit 
$(function() {         
         
    // initialize scrollable  
    $("div.scrollable").scrollable();     
     
});
*/