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

function handleSliderChange(e, ui)
{
	var container = jQuery(this).parent().children('.scrollContainer');
	var maxScroll = jQuery(container).prop('scrollWidth') - jQuery(container).width();
	jQuery(container).animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
	var container = jQuery(this).parent().children('.scrollContainer');
	var maxScroll = jQuery(container).prop('scrollWidth') - jQuery(container).width();
	jQuery(container).prop('scrollLeft', ui.value * (maxScroll / 100));
}