$(document).ready(function(){
  $("#content-slider").slider({
    animate: true,
	min: 0,
	max: 100,
	value: 50,
	orientation: 'vertical',
    change: handleSliderChange,
    slide: handleSliderSlide
  });
});

/* On touchscreens the touch on the slide control is not so precise, so is hard to slide the control to margins 0 and 100). The control interval 10-50 is remapped in 0-100) to compensate. */

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

  var val = parseInt((ui.value - 10) * 100 / 40);
  if(val < 0) val = 0;
  if(val > 100) val = 100

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

function handleSliderSlide(e, ui)
{
  var maxScroll = $("#content").attr("scrollHeight") - $("#content").height();
  
   var val = parseInt((ui.value - 10) * 100 / 40);
  if(val < 0) val = 0;
  if(val > 100) val = 100

  $("#content").attr({scrollTop: maxScroll - val * (maxScroll / 100) });
}