Chapter 6. Creating an Event Timeline Using a Slider

We have used many components of the fabulous jQuery UI so far. In the previous chapter, Chapter 5, Implementing CAPTCHA Using Draggable and Droppable, we used draggable, droppable, and the slider functionalities to create some new CAPTCHA implementations. In this chapter, we will use the slider again, and we will create an event timeline that makes use of it.

The following screenshot shows what the timeline will look like. It will be a scrollable, horizontal list of events from the year 2001 to the year 2010. The data for the events of each year will be kept in a JavaScript object and displayed using JavaScript.

Each year will be displayed as a separate block wherein we will display the number of events that occurred in that year. Initially, five blocks for each year will be visible when the page loads, but we will keep the number of items to display configurable:

There will be a slider under the timeline. It will have its range...