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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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',
{axis:'vertical',minimum:0,maximum:200,alignY:0});
}
Event.observe(window,'load',initializeSlider,false);
</script>
<style type="text/css">
h1{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}
#slider{
width: 6px;
height: 200px;
background: #ccc;
}
#handle{
width: 12px;
height: 8px;
background: #f90;
}
</style>
</head>
<body>
<h1>Example of vertical slider</h1>
<div id="slider">
<div id="handle"></div>
</div>
</body>
</html>
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.
Next: Coding a horizontal DHTML slider >>
More DHTML Articles
More By Alejandro Gervasio
/ 4 
