Home arrow DHTML arrow Page 4 - 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 - Using additional parameters with the Control.Slider object
(Page 4 of 4 )

As I explained earlier, the final example that Iím going to show you in this first article of the series is aimed at demonstrating how to include a more sophisticated slider into a web document. Here, when I say the term "sophisticated," what I mean is that itís possible to code a DHTML control that displays offset information whenever the respective handle is released across its sliding track.

Quite possibly the above description sounds a bit confusing, so below I included a concrete example which illustrates in a friendly fashion how to incorporate this improved slider into a simple web page.

The corresponding code sample is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of vertical slider with offset information</title>
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript" src="js/scriptaculous.js"></script>
<script language="javascript">
function initializeSlider(){
   new Control.Slider('handle','slider',
(v){$('slidervalue').innerHTML='slide value:
value: '+v}});
<style type="text/css">

   font: bold 12px Verdana, Arial, Helvetica, sans-serif;
   color: #000;

   width: 6px;
   height: 200px;
   background: #ccc;

   width: 12px;
   height: 8px;
   background: #f90;

   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
<h1>Example of vertical slider with offset information</h1>
<div id="slider">
<div id="handle"></div>
<div id="slidervalue"></div>

If you examine the source code that corresponds to the above example, youíll see that I used the same "Control.Slider" object that you learned in the prior examples. In this case, I'm using it to code a slider that displays its offset values. Of course, the most interesting thing to notice here is the definition of two callback functions, which are called when the slider is moving across its track, and when it stops sliding.

These brand new parameters taken by the "Control.Slider" object provide web developers with the capacity to perform different tasks according to the movements of the slider in question.

To dissipate any eventual doubts on how these callback functions work, below I included a screen shot that shows the slider displaying different offset values.

That being said, take a look at the following image:

All right, I believe that the previous picture should be explicit enough to clarify any possible questions on how this DHTML slider works. However, if you still feel that there are some gaps in your knowledge about using the sliders bundled with the Scriptaculous framework, I suggest you try playing with all the hands-on examples shown in this tutorial. And finally, donít forget to download the source files corresponding to this JavaScript library from its official web site located at: http://www.script.aculo.us. The experience is really fun, trust me!

Final thoughts

In this first article of the series, I walked you through the process of coding some basic sliders that come packaged with the Scriptaculous animation framework. As you saw, this process is really straightforward, since all you have to do is work with its powerful "Control.Slider" object. Period.

Nevertheless, Iím only scratching the surface when it comes to working with these handy DHTML sliders. They offer many more options, which will be properly covered in the final part of the series. Now that youíve been warned, you wonít want to miss it!

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.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials