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

		this.scrollLeft -= (delta * 60);

		event.preventDefault();
		
		var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
		var altura = $("#content-slider").height() - 40;
		
		$(".content-slider-handle").css("top", this.scrollLeft / (maxScroll/altura));

	});
  
});

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