Implementing the timeline functionality
The page that we designed is static as of now. There are three things we need to change to get the timeline working: slider functionality, window dragging, and displaying events for selected year.
Let us begin implementing them one by one, starting with the slider.
Making the slider work
The slider will have its range set to the minYear and maxYear properties. We will update the value of the sliderVal label as the slider slides, and when it stops, we will animate the interface that includes the positioning of the timeline, window div, leftOverlay div and rightOverlay div. In order to achieve this, we will write the following code inside the createTimeline method:
$('#slider').slider( { min: objTimeline.minYear, ...Get Mastering jQuery UI now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
