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 - Coding an improved horizontal slider (Page 2 of 4 )
As I stated in the introduction of this article, the Scriptaculous library allows you to easily create sliders that are capable of displaying additional information aside from the basic elements, such as the handles themselves and the sliding tracks. In this case, by using the already familiar "Control.Slider" object that you learned in the previous tutorial, along with a few extra input parameters, it's possible to build sliders that display offset information.
To be even more illustrative, the look and feel of this brand new kind of DHTML control is shown in the screen shot below:
In this case, the previous image depicts the visual appearance of a horizontal slider, which also displays offset data. However, I'm pretty certain that you want to see the pertinent source code that renders this specific type of slider, so below I included a hands-on example which displays the horizontal slider that you saw in the previous picture.
Here is the code listing:
As you can see, building an horizontal slider that shows offset values is indeed a straightforward process. The operation is reduced to calling the appropriate callback functions with the respective "onSlide" and "onChange" handlers. Logically, these callback functions are passed in as additional parameters to the "Control.Slider" object used previously, which demonstrates the remarkable versatility of the object in question.
Okay, now that you know how to code a horizontal slider capable of displaying offset information, it's a good time to learn how to create sliders that move the respective handles at predefined offset intervals.
This will be a really instructive experience. If you want to see how these DHTML controls will be built, please click on the link that appears below and keep reading.