Home arrow DHTML arrow Page 2 - 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 - Coding a basic vertical slider with the Scriptaculous framework
(Page 2 of 4 )

As I explained in the beginning of this tutorial, including a DHTML slider within a given web document can be accomplished with minor efforts. The procedure is limited to using the "Control.Slider" object that obviously comes bundled with the Scriptaculous framework.

The first example that Iím going to show you covers the implementation of a basic vertical slider, whose look and feel is depicted in the screen shot below: 

As you can see, the DHTML slider shown above is quite appealing. It features two primary elements, its sliding track and the respective handle. However, now that you have seen how this control looks, let me show you the corresponding (X)HTML file that displays this element in a conventional web page.

The respective 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</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',
<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;
<h1>Example of vertical slider</h1>
<div id="slider">
<div id="handle"></div>

In this case, I used the functionality provided by the Prototype library, in conjunction with the Scriptaculous JavaScript package, to include the vertical slider that you saw previously into a sample web document.

As I said before, the inclusion of this DHTML control is performed by using the "Control.Slider" object that comes integrated with this software. The object accepts some intuitive parameters, such as the ID's values that correspond to the handle and the sliding track of the slider respectively (in this case I used two DIVs to contain these elements). It also specifies its alignment via its "axis" argument.

You can see that I specified a couple of additional parameters for the slider, including its minimum and maximum values, and the vertical offset of its handle, via the "alignY" argument. Quite simple, right?

Of course, it should be noticed that itís possible to specify even more input arguments for a concrete slider, but these extra features will be covered progressively in subsequent hands-on examples.

All right, at this point you have seen how to include a simple vertical slider into a given web document via the powerful "Control.Slider" object that comes packaged with the Scriptaculous animation framework. Therefore I believe that itís a good time to go forward and explore other controls integrated with this package, in this case to see how to code a horizontal slider.

As you might have guessed, the process will be closely similar to the one just described a few lines above, but it will be discussed in the following section. So, click on the link below and keep reading.

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