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.
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,
max: objTimeline.maxYear,
step : 1,
start : function(event, ui)
{
if(objTimeline.isWindowOpen)
{
objTimeline.closeWindow();
}
},
slide: function(event, ui)
{
objTimeline.currentYear = ui.value;
$('#sliderVal...