Make page scroll using jquery ui slider() function

Question

I am trying t create a vertically scrollable slider using jquery/javascript. Spend the last two days trying out different options but nothing seems to work with my layout.

$(".timeLiner .timeLinerBar").slider({
  orientation: "vertical",
  min: 0,
  max: 100,
  value: 2,
  slide: function(event, ui) {
    $("span#amount").text(ui.value);
  }
});

$(document).scroll(function() {
  var doc_top = $(window).scrollTop();
  var doc_height = $(document).height();
  var w_height = $(window).height();
  $('.timeLinerBar').innerHTML = (doc_top) / (doc_height - w_height) * 100;
});

$('.timeLinerBar').on('change', function() {
  var val_mini = document.getElementById("amount").innerHTML;
  var doc_height = $(document).height();
  var w_height = $(window).height();
  var pos_scroll = (doc_height - w_height) / 100 * val_mini;
  window.scrollTo(0, pos_scroll);
});

.timeLinerBar {
  float: right;
  width: 5px;
  height: 100%;
  position: absolute;
  background: darkred;
  top: 0;
  bottom: 0px;
  margin: 0 auto;
  z-index: 999 !important;
  left: 50%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeLinerBar" id="slider-mini"><span id="amount"></span></div>

I want to be able to scroll the page using the .timeLinerBar class which has the jquery-ui .slider() function - I want to scroll the page vertically.