$(document).ready(function(){
  $("#content-slider").slider({
 
    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) });
}

function moveback(){
var value = $('#content-slider').slider('option', 'value');
value = value-10;
if (value == -10){
value=0;
}
$('#content-slider').slider('option', 'value', value);
 var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
    $("#content-scroll").animate({scrollLeft: value * (maxScroll / 100) }, 400);
}
function moveforward(){
var value = $('#content-slider').slider('option', 'value');
value = value+10;
if (value == 120){
value=100;
}
$('#content-slider').slider('option', 'value', value);


 var maxScroll = $("#content-scroll").attr("scrollWidth") - $("#content-scroll").width();
  $("#content-scroll").animate({scrollLeft: value * (maxScroll / 100) }, 400);
  
}