Adding More Features to Sliders with the Scriptaculous Framework
As you probably know, the Scriptaculous animation framework comes equipped with a module for building DHTML-based sliders. If you want to learn how to include these controls in your own web pages, start reading this article now! Welcome to the final part of the series that began with "Using sliders with the Scriptaculous framework." Comprised of two tutorials, this series gets you started quickly using these powerful DHTML controls, and shows you how to incorporate them into your existing web-based graphical interfaces.
Adding More Features to Sliders with the Scriptaculous Framework - Building a slider with predefined offset values (Page 3 of 4 )
Naturally, this helpful characteristic can be rapidly implemented by inputting some extra parameters to the "Control.Slider" object that I used with previous examples. This implies that creating a slider that uses predefined offset values is a process closely identical to the ones demonstrated in prior sections of this tutorial.
To understand more clearly how this brand new slider works, have a look at the following image, which shows this DHTML control in action.
Having said that, here's the picture in question:
After seeing the above screen shot, you'll have to agree with me that the Scriptaculous package makes it really easy to create sliders that use a predefined range of offset values. Nonetheless, if you're anything like me, you may want to examine a concrete hand-on example that demonstrates how to include this type of slider into a sample web page.
So, bearing in mind this possibility, below I coded a simple (X)HTML file that precisely displays the aforementioned DHTML control. Its source code is as follows:
If you study the above example, you'll see that building a slider that utilizes predefined offset values is only a matter of specifying the corresponding offset range, via the respective $R function (please remember that this function comes bundled with the Prototype library), in addition to indicating how these offset values will be displayed when moving the slider. Of course, this last process is achieved by using a "values" parameter, which is passed to the already familiar "Control.Slider" object. Quite simple, isn't it?
So far, so good. At this stage I showed you how to incorporate some useful features into the basic set of sliders that come packaged with the Scriptaculous animation framework. Therefore, the question here is: what comes next?
Well, since I'm assuming that you already learned the process of working with these handy sliders, the last section of this article will show how to expand the existing functionality of these controls, by adding to them a simple but useful progress bar.
Want to see how this will be achieved? Keep reading.