$(document).ready(function(){
var difference = $('#content-ver-scroll').height();//eg it's 200px longer 
  $("#content-ver-slider").slider({
    animate: true,
    change: handleVertSliderChange,
    slide: handleVertSliderSlide,
	orientation: 'vertical',
	value:100

	});  
  
  	//additional code for mousewheel
	$("#mousewheel").mousewheel(function(event, delta){
  		var speed = 5;
	    var sliderVal = $("#content-ver-slider").slider("value");//read current value of the slider
		var maxScroll = $("#content-ver-scroll").attr("scrollHeight") - $("#content-ver-scroll").height();
	    sliderVal += (delta*speed);//increment the current value

	    $("#content-ver-slider").slider("value", sliderVal);//and set the new value of the slider
		
		var topValue = -((100-sliderVal)*difference/100);//calculate the content top from the slider position
		
		if (topValue>0) topValue = 0;//stop the content scrolling down too much
		if (Math.abs(topValue)>difference) topValue = (-1)*difference;//stop the content scrolling up too much

		  $("#content-ver-scroll").attr({scrollTop: maxScroll-(sliderVal * (maxScroll / 100)) });
	    event.preventDefault();//stop any default behaviour
 	});


  
});

function handleVertSliderSlide(e, ui)
{
  var maxScroll = $("#content-ver-scroll").attr("scrollHeight") - $("#content-ver-scroll").height();

  $("#content-ver-scroll").attr({scrollTop: maxScroll-(ui.value * (maxScroll / 100)) });
}

function handleVertSliderChange(e, ui)
{
  var maxScroll = $("#content-ver-scroll").attr("scrollHeight") - $("#content-ver-scroll").height();

  $("#content-scroll").animate({scrollTop: maxScroll-(ui.value * (maxScroll / 100)) }, 1000);
}