Before we start exploring the slider, let me try to give you a complete picture of its functionality with a simple example.

Google Finance uses a horizontal slider, showing the price at a given day, month, and year. Although this particular module is built in Flash, we can build a similar module using the script.aculo.us slider too. To understand the concept and how it works, look at the following screenshot:

Now that we have a clear understanding of what the slider is and how it appears in UI, let’s get started!

First steps with slider

As just explained, a slider can handle a single value or a set of values. It’s important to understand at this point of time that unlike other features of script.aculo.us, a slider is used in very niche applications for a specific functionality.

The slider is not just mere functionality, but is the behavior of the users and the application.

A typical constructor syntax definition for the slider is shown as follows:

new Control.Slider(handle, track [ , options ] );

Track mostly represents the <div> element. Handle represents the element inside the track and, as usual, a large number of options for us to fully customize our slider.

For now, we will focus on understanding the concepts and fundamentals of the slider. We will surely have fun playing with code in our Code usage for the slider section.

Parameters for the slider definition

In this section we will look at the parameters required to define the slider constructor:

• track in a slider represents a range
• handle in a slider represents the sliding along the track, that is, within a particular range and holding the current value
• options in a slider are provided to fully customize our slider’s look and feel as well as functionality

It’s time to put the theory into action. We need the appropriate markup for working with the slider. We have <div> for the track and one <div> for each handle. The resulting code should look like the snippet shown as follows:

<div id="track"><div id="handle1"></div></div>

It is possible to have multiple handles inside a single track. The following code snippet is a simple example:

<div id="track"><div id="handle1"></div>
<div id="handle2"></div></div>

Options with the slider

Like all the wonderful features of script.aculo.us, the slider too comes with a large number of options that allow us to create multiple behaviours for the slider. They are:

• Axis: This defines the orientation of the slider. The direction of movement could be horizontal or vertical. By default it is horizontal.
• Increment: This defines the relation between value and pixels.
• Maximum: This is the maximum value set for the slider to move to. While using a vertical slider from top-to-bottom, the bottom most value will be the maximum. And for a horizontal slider from left-to-right, the right most value will be the maximum value.
• Minimum: This is the minimum value set for the slider to move to. While using a vertical slider from top-to-bottom, the top most value will be the minimum. And for a horizontal slider from left-to-right, the left most value will be the minimum value approach for horizontal slider.
• Range: This is the fixed bandwidth allowed for the values. Define the minimum and maximum values.
• Values: Instead of a range, pass a set of values as an array.
• SliderValue: This sets the initial value of the slider. If not set, will take the extreme value of the slide as the default value.
• Disabled: As the name suggests, this disables the slider functionality.

Some of the functions offered by the slider are:

• setValue:This will set the value of the slider directly and move it to the value position.
• setDisabled: This defines that the slider is disabled at runtime.
• setEnabled: This can enable the slider at runtime.

Some of the callbacks supported by the slider are:

• onSlide: This is initiated on every slide movement. The called function would get the current slider value as parameter
• onChange: Whenever the value of the slider is changed, the called function is invoked. The value can change due to the slider movement or by passing the setValue function.

Types of slider

script.aculo.us provides us the flexibility and comfort of two different orientations for the slider:

• Vertical slider
• Horizontal slider

Vertical slider

When the axis orientation of a slider is defined as vertical, the slider becomes and acts as a vertical slider.

Horizontal slider

When the axis orientation of a slider is defined as horizontal, the slider becomes and acts as a horizontal slider.

So let’s get our hands dirty with code and start defining the constructors for horizontal and vertical slider with options. Trust me this will be fun.