Home arrow DHTML arrow Using Sliders with the Scriptaculous Framework

Using Sliders with the Scriptaculous Framework

The Scriptaculous animation framework has become popular with web developers due to its range of capabilities and its versatility. One of its more useful features is a module of DHTML-based sliders, which assist developers in creating front ends for web applications without needing to create complex JavaScript routines.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
April 24, 2007
  1. · Using Sliders with the Scriptaculous Framework
  2. · Coding a basic vertical slider with the Scriptaculous framework
  3. · Coding a horizontal DHTML slider
  4. · Using additional parameters with the Control.Slider object

print this article

Using Sliders with the Scriptaculous Framework
(Page 1 of 4 )


As youíll possibly know, in the last few months the Scriptaculous animation framework has become extremely popular with web developers, due to its remarkable capabilities for facilitating the development of Internet applications. Indeed, its seamless integration with the powerful Prototype JavaScript package, in addition to its robust DHTML module, makes this software a heavyweight contender among the numerous JavaScript frameworks available on the web these days.

However, in case you didnít know, aside from its useful animation module, which by the way includes a bunch of eye-catching visual effects, powerful AJAX controls, auto-completion mechanisms, and so forth, this robust JavaScript software also comes packaged with a neat set of drag-and-drop elements which can be easily included into any web page with minor hassles.

Particularly, among this group of drag-and-drop components that come bundled with the Scriptaculous framework, thereís a module that deserves special attention. It can be really useful when it comes to empowering the development of graphical user interfaces.

In this case Iím talking about the remarkable set of DHTML-based sliders, which come in a great variety and suit the requirements of any professional-looking web application. These sliders can be coded by using an intuitive, object-oriented approach, and can be used to enrich largely diverse front-ends without having to create complex JavaScript routines.

Therefore, assuming that you may want to learn how to include with minor efforts these DHTML sliders into your own web applications, over the course of this two-part series, Iím going to show you how to start working with them. I'm also to going to cover some of their most important features, such as the configuration of their additional parameters for displaying offset and range values of the sliders in question, and much more.

By the end of this series, you should be armed with all the tools required to integrate these sliders into any existing graphical user interface, without the need to waste your time coding complex DHTML routines.

With the preliminaries out of our way, letís move on and learn together how to use the robust set of DHTML sliders bundled with the Scriptaculous animation framework. Letís get going!

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials