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

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

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.

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 :

 

Books to Consider

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