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

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) });
}



$(document).ready(function(){
  $("#content-sliderX").slider({
    animate: true,
    change: handleSliderChangeX,
    slide: handleSliderSlideX
  });
});

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

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