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:

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.

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:

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