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 - Improving the functionality of basic sliders (Page 4 of 4 )
In consonance with the concepts that I expressed in the previous section, I'm going to demonstrate how to create a couple of regular sliders which also display a basic progress bar.
Logically, this progress bar can be useful only in limited situations, but the purpose of showing the respective examples is to demonstrate how to take advantage of the handy "onSlide" and "onChange" handlers that are accepted by the "Control.Slider" object used in all the examples that you learned before.
Please take a look at the following pair of code listings. The first one shows how to include an horizontal slider that also displays a simple progress bar, while that the second example demonstrates the same situation using a vertical control.
The examples are accompanied by two additional screen shots, which hopefully will help to clarify even more how these improved DHTML sliders work.
As shown above, the implementation of a basic progress bar along with the corresponding slider is only a matter of including an additional DIV into a sample web document, where the width of this containing element is modified as the slider moves across its sliding track.
As usual with many of my articles on web development, feel free to modify all the hands-on examples shown here. This will help you understand more quickly how to use include these simple yet powerful sliders into your own web-based user interfaces. Happy coding!
That's all for now. In this two-part series, I walked you through the basics on how to use the set of DHTML sliders that come integrated with the Scriptaculous animation framework. If you're thinking about incorporating this type of web-based control into the front end of your existing or future web applications, this library might be a good option.
See you in the next web development tutorial!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.