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

Exclusive offer: get 50% off this eBook here
PHP and script.aculo.us Web 2.0 Application Interfaces

PHP and script.aculo.us Web 2.0 Application Interfaces — Save 50%

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

$20.99    $10.50
by Sridhar Rao | May 2009 | AJAX PHP Web Development

A slider, according to the dictionary, stands for the one that slides. Yes, a slider in the web application context stands for holding and sliding values from a fixed given range, or even from an array of values. The slider is really useful and worthy in places where the user needs to slide through a lot of values and also the application needs to respond to those values and changes. In the first part we were introduced to types of Sliders and code usage for the slider. This is the second part of a two part article on the concept of sliders using script.aculo.us.

In this article by Sridhar Rao, we shall cover:

  • Code usage for the slider and options
  • Tips and tricks with the slider
  • Hands-on example with vertical and horizontal slider

Code usage for sliders with options

We are now done with the most important part of the slider: the implementation of the slider in our applications.

But wait, we need the slider to suit our applications, right? So let's customize our slider with options.

We have mentioned earlier that track is the range of values. So let's first define the range for our slider.

window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
axis:'vertical',
range:$R(1,100)
}

The range option uses the Prototypes' objectRange instance. Hence, we declare it using

$R (minimum, Maximum).

Everything looks neat until here. Let's add some more options to our constructor, onSlide().

Using the onSlide() callback every time, we drag the slider and the callback is invoked. The default parameter passed to onSlide() is the current slider value.

window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
axis:'vertical',
range:$R(1,100),
onSlide: function(v) { $('value1').innerHTML = "New Slide
Value="+v;}
}
}

We have added a div called value1 in our HTML code. On dragging the slider, we will update the value1 with the current slider value.

OK, so let's see what happened to our slider to this point. Check out the following screenshot:

 PHP and script.aculo.us Web 2.0 Application Interface

Impressed? And, we are not done yet. Let's add more options to the slider now.

You may ask me, what if the slider in the application needs to be at a particular value by default? And I will say use the sliderValue option. Let's make our slider value 10 by default. Here is the snippet for the same:

window.onload = function() {
      new Control.Slider('handle1' , 'track1',
     {
   axis:'vertical',
   range:$R(1,100),
   sliderValue: 10,
   onSlide: function(v) { $('value1').innerHTML = "New Slide
                                                 Value="+v;}
}

And, you should see the slider value at 10 when you run the code.

Now your dear friend will ask, what if we don't want to give the range, but we need to pass the fixed set of values? And you proudly say, use the values option.

Check out the usage of the values options in the constructor.

window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
range:$R(1,25),
values:[1, 5,10,15,20,25],
onSlide:function(v){ $('value1').innerHTML = "New Slide
Value="+v;}
}
);
}

We have added a set of values in the array form and passed it to our constructor. Let's see what it looks like.

PHP and script.aculo.us Web 2.0 Application Interfaces

Tips and tricks with the slider

After covering all the aspects of the slider feature, here is a list of simple tips and tricks which we can make use of in our applications with ease.

Reading the current value of the slider

script.aculo.us "genie" provides us with two callbacks for the slider to read the current value of the slider. They are:

  • onSlide
  • onChange

Both these callbacks are used as a part of options in the slider.

onSlide contains the current sliding value while the drag is on. The callback syntax is shown as follows:

onSlide: function(value) {
// do something with the value while sliding. Write or Edit the
value //of current slider value while sliding
}

onChange callback will contain the value of the slider while the sliding or the drag event ends. After the drag is completed and if the value of the slider has changed then the onChange function will be called. For example, if the slider's current value is set to 10 and after sliding we change it to 15, then the onChange callback will be fired. The callback syntax is shown as follows:

onChange: function(value){
// do anything with the "changed" and current value
}

Multiple handles in the slider

Now, a thought comes to our mind at this point: Is it possible for us to have two handles in one track?

And, the mighty script.aculo.us library says yes!

Check out the following code snippet and screenshot for a quick glance of having two handles in one track:

HTML code
<div id="track1">
<div id="handle1"></div>
<div id="handle2"></div>
</div>

JavaScript code for the same:

window.onload = function() {
new Control.Slider(['handle1','handle2'] , 'track1'
);
}

Now, check out the resulting screenshot having two handles and one track:

PHP and script.aculo.us Web 2.0 Application Interfaces

The same can also be applied for the vertical slider too.

PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

Disabling the slider

We can disable our slider element using the option: disabled. We need to pass true to set the element in the disabled state. By default the value is set to false.

Our constructor definition would look like the code snippet shown as follows:

window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
range:$R(1,25),
values:[1, 5,10,15,20,25],
disabled:true,
onSlide:function(v){ $('value1').innerHTML = "New Slide
Value="+v;}
}
);
}

The disabled option will initially make the element's state disabled, and we can change this state using setDisabled.

Enabling the slider

As we can disable our slider element using the disabled option, we can also enable the element using the same option by passing the value as false.

Our constructor definition would look like the code snippet shown as follows:

window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
range:$R(1,25),
values:[1, 5,10,15,20,25],
disabled:false,
onSlide:function(v){ $('value1').innerHTML = "New Slide
Value="+v;}
}
);
}

By default the value of the disabled option is false. The elements are enabled, and we can change the state using setEnabled.

Hands-on example with vertical and horizontal slider

Now that we have worked with vertical and horizontal slider, wouldn't it be a great idea to see both types of the slider on the same page? Yes indeed.

Let's get started.

At a very basic level, we can change the axis option of slider and we can get either the horizontal or vertical slider.

So now we will have two slider types on one page, and the only difference is in the axis orientation.

We need to create two tracks and the respective handles for the slider <div>s. The HTML part of the code is given as follows:

<h4>Mashup of Horizontal + Vertical Sliders</h4>
<div id="track1" class="track">
<div id="handle1" class="handle"></div>
</div>
<div id="track2">
<div id="handle2"></div>
</div>

This code is pretty simple. We have created a <div> as track1 and its respective inner <div> to hold the value as handle1. Similarly, we have created one more slider <div> as track2 and its handle as handle2.

After a bit of trendy dressing up of, and applying make-up to, the CSS, the basic slider looks like the following screenshot:

PHP and script.aculo.us Web 2.0 Application Interfaces

The CSS code is given here:

h4{ font: 13px verdana }
#track1 {
background-color:#BCE6D6;
height: 1em;
width: 200px;
}
#handle1 {
background-color:#30679B;
height: 0.5em;
width: 10px;
}
#track2 {
background-color:#BCE6D6;
height: 10em;
width: 15px;
}
#handle2 {
background-color:#30679B;
height: 1em;
width: 15px;
}
#sliding {
font: 13px verdana;
}
#changed {
font: 13px verdana;
}

OK, so now we have our slider in our page. Wait, we are missing something. Are you wondering where is the scripting and functionality?

Before that, let's add two divs, which will help us view the current values using the onChange and onSlide callbacks.

<p id="sliding"></p>
<p id="changed"></p>

Now let's first add script.aculo.us power to track1, our first slider.

new Control.Slider('handle1' , 'track1',
{
range: $R(1,50),
values: [1,5,15,25,35,45,50],
sliderValue: 1,
onChange: function(value){

$('changed').innerHTML = 'Changed Value :
'+value;
},
onSlide: function(value) {
$('sliding').innerHTML = 'Sliding Value: '+value;
}
} );

Let's take a closer look at the above code and see what is happening.

We have defined range, values, and sliderValue options for the slider. We have also added two callbacks onChange and onSlide. As I mentioned earlier, these callbacks get the current value of the slider as a parameter.

Hence, we are reading values from both the callbacks and updating the divs' sliding and changed when the event occurs.

Also, since we did not exclusively mention the axis definition, the default is horizontal.

So, the application now looks like the following screenshot:

PHP and script.aculo.us Web 2.0 Application Interfaces

Remember, the values will only be updated if we move the horizontal slider. And, nothing happens if we slide through the vertical slider. We have not yet defined the functionality for the vertical slider. Let's do it now.

The code for the vertical slider will also remain mostly similar with only difference of axis orientation.

new Control.Slider('handle2' , 'track2',
{
range: $R(1,50),
axis:'vertical',
sliderValue: 1,
onChange: function(value){
$('changed').innerHTML = 'Changed Value :
'+value;
},
onSlide: function(value) {
$('sliding').innerHTML = 'Sliding Value:
'+value;
}
} );

You can notice the fact that the callback definition remains the same for the vertical slider as well.

So now when we move the vertical slider, the value gets updated in the sliding and changed <div>s. They get updated with the current value.

The complete module with both horizontal and vertical slider is shown as follows:

PHP and script.aculo.us Web 2.0 Application Interfaces

Summary

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

  • Code usage for the slider and options
  • Tips and tricks with slider
  • Hands-on example for the horizontal and vertical slider

In this two-part article series we have learned all the features of sliders using script.aculo.us in detail. We have also worked on some hands-on examples to make us more comfortable using the sliders in our own applications.

 

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

 

PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Sridhar Rao

Sridhar Rao has been learning, working and developing web applications from the time he was introduced to web. The very idea of reaching out to masses and bringing change in the behavior of the users through web applications excites him the most. Most of his work has been in PHP, MySQL and Javascript. He has worked with some of the leading technology and services companies in his IT career.

Sridhar currently works for the world’s leading database and enterprise company. He holds an engineering degree in Information Technology and is based out of Bangalore, India.

Books From Packt

 

Learning jQuery 1.3
Learning jQuery 1.3

Magento: Beginner's Guide
Magento: Beginner's Guide

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

Mastering phpMyAdmin 3.1 for Effective MySQL Management
Mastering phpMyAdmin 3.1 for Effective MySQL Management

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
T
M
f
9
N
z
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software