Browse DevX
Sign up for e-mail newsletters from DevX


Script.aculo.us Controls: Do Your Web Users a Favor : Page 5

Learn how to integrate Script.aculo.us web controls into your web applications to make the end-user experience more pleasant.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Using Sliders
Sliders are controls you use everyday in your desktop applications. For example, the volume control is a typical example of slider. Basically, a slider consists of a track and a handle you can move along the track. The following example builds a simple slider that displays its value as the user drags its handle:

Event.observe(window, "load", function() { new Control.Slider( 'sliderHandle', 'sliderTrack', { range: $R(0, 100), values : [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], onChange : updateValue, onSlide : updateValue } ); } );

The above code is just a snippet of the whole HTML page. You can find it in the downloadable code for this article under the name simple-slider.htm.

As you can see, you create an instance of Control.Slider and pass the following parameters to it:

  • The <div> ID of the handle
  • The <div> ID of the track
  • The literal object that lets you customize the slider

The options used in the previous example are:

  • range: the range of values
  • values: the only values the slider may assume (By defining such an option, the slider may assume only discrete values.)
  • onChange: the callback function to call when the user changes the position of the handle
  • onSlide: the callback function to invoke when the user drags the handle

In the previous example, I used updateValue as the callback function for both onChange and onSlide. This function just updates the state of the <div> that displays the slider's current value.

The only requirement for the HTML code is that the handle must be a child element of the track, as follows:

<div id="sliderTrack"> <div id="sliderHandle"></div> </div>

Figure 5 shows the slider in action.

Figure 5. Slider in Action: Here is the slider in action.

Of course, you can manipulate the CSS code to further customize your slider appearance. For example, you might want to use images for both the track and the handle to make the slider more attractive.

One last tip: You can change the slider value programmatically as the following example shows:

var sliderRef = new Control.Slider( 'sliderHandle', 'sliderTrack', { range: $R(0, 100), values : [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], onChange : upDateValue, onSlide : updateValue } ); // set the slider value sliderRef.setValue(80);

First, you need to attach the slider instance to a reference and then you may change its value by using the setValue method of the Control.Slider class.

Improving the End-User Experience
In the world of application development, desktop applications used to be preferred to their web counterparts for many reasons, such as responsiveness and the available set of controls. Nowadays, however, leveraging Ajax and UI libraries such as Script.aculo.us, developers can develop web applications that are both responsive and graphically appealing. This article showed you how to integrate Script.aculo.us controls into your web applications to make the end-user experience more pleasant.

Alessandro Lacava is a software developer and technical writer based in Italy. He is mainly interested in Java and .NET technologies, Web applications and telecommunication systems. Alessandro holds a degree in telecommunications engineering. You can reach him via his Web site.
Thanks for your registration, follow us on our social networks to keep up-to-date