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.