Slider for Dynamic Applications using script.aculo.us (part 1)

Build powerful interactive AJAX applications with script.aculo.us and PHP

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:

PHP and script.aculo.us Web 2.0 Application Interfaces

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.

Code usage for the slider

As a developer, I am sure you must have got a little bored reading only explanation. But hey hang on, we are getting into code!

Let's start with our HTML code and then the basic constructor definition of the slider.

The HTML code snippet is shown as follows:

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

Here, we have defined our track and handle as <div> elements.

The handle element should be placed inside the track element.

Good. So let's define the constructor for the slider here:

new Control.Slider('handle1', 'track1');

That's it! No, wait. We are missing something. Although the code is perfect, when we fire it up in the browser we can't see anything. That's because we need to style it.

The complete code with CSS is shown as follows:

<script type="text/javascript">
   window.onload = function() {
      new Control.Slider('handle1' , 'track1'
      );
}
</script>
<style type="text/css">
h4{ font: 13px verdana }
#track1 {
   background-color:#BCE6D6;
   height: 1em;
   width: 150px;
}
#handle1 {
   background-color:#30679B;
   height: 1em;
   width: 6px;
}
</style>
<body>
<h4>Basic Slider Example</h4>
<div id="track1">
   <div id="handle1"></div>
</div>

And the resulting output is shown in the following screenshot:

PHP and script.aculo.us Web 2.0 Application Interfaces

That's the most basic slider we created. And I am sure you are not content with that. We need to explore more.

Code usage for the vertical slider

Moving on, we will now create a vertical slider and add some options to enhance our slider feature.

Most of the code remains from the above example. We will focus on the required changes to be made in the above code.

As mentioned in the explanation above, we need to define the axis orientation as vertical in our options to make a slider vertical.

axis: 'vertical'

So, the new constructor looks like the snippet shown as follows:

window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
axis:'vertical'
}
);
}

And yes, since we are trying to make our slider vertical we need to change the CSS properties of height. The new CSS code will look like the following snippet:

#track1 {
background-color:#BCE6D6;
height: 10em;
width: 15px;
}
#handle1 {
background-color:#30679B;
height: 1em;
width: 15px;
}

So, the final script for the vertical slider is shown as follows:

<script type="text/javascript">
window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
axis:'vertical'
}
);
}
</script>
<style type="text/css">
h4{ font: 13px verdana }
#track1 {
background-color:#BCE6D6;
height: 10em;
width: 15px;
}
#handle1 {
background-color:#30679B;
height: 1em;
width: 15px;
}
</style>
</head>
<body>
<h4>Basic Vertical Slider Example</h4>
<div id="track1">
<div id="handle1"></div>
</div>

And, the beautiful vertical slider is here! Check out the following screenshot:

PHP and script.aculo.us Web 2.0 Application Interfaces

Code usage for the horizontal slider

We have seen how to create a vertical slider. We want you to have a wild guess of how to make a horizontal slider. Let me give you two hints:

  • We don't have to struggle to make a slider horizontal. It's the default axis option.
  • We can make a horizontal slider by passing the horizontal option to axis.

Which one would you prefer?

I am not going to give you code for this one though. But yes, I will give you approaches for doing the same.

We have already created one horizontal slider in the Code usage for the horizontal slider section. That was one approach. Now try changing the axis option to horizontal in the above code for the vertical slider.

You may also need to change some CSS properties for height and width, and I am sure you would love doing them. It's so much fun! After you make changes to the height and width parameters of the CSS properties, the screenshot of slider should look like the following:

PHP and script.aculo.us Web 2.0 Application Interfaces

Summary

In this article we have learned and explored the following topics:

  • Introduction to the slider using script.aculo.us
  • Explanation of the slider
  • Different types of the slider

In the second part of the article series, we shall see the code usage for the slider with options, some tips and tricks, and a hands-on example for the horizontal and vertical slider.

 

If you have read this article you may be interested to view :

Books to Consider

PHP and script.aculo.us Web 2.0 Application Interfaces
$ 15.75
Microsoft Dynamics NAV 7 Programming Cookbook
$ 32.99
Programming Microsoft® Dynamics™ NAV
$ 21.60
comments powered by Disqus
X

An Introduction to 3D Printing

Explore the future of manufacturing and design  - read our guide to 3d printing for free