Adding More Features to Sliders with the Scriptaculous Framework - Building a slider with predefined offset values
(Page 3 of 4 )
As you'll certainly recall from the previous section, the Scriptaculous JavaScript library also allows us to easily build DHTML-based sliders that are capable of moving across their sliding track at predefined offset values. This can be quite useful in certain cases where a user interface of a given web application requires this handy feature.
Naturally, this helpful characteristic can be rapidly implemented by inputting some extra parameters to the "Control.Slider" object that I used with previous examples. This implies that creating a slider that uses predefined offset values is a process closely identical to the ones demonstrated in prior sections of this tutorial.
To understand more clearly how this brand new slider works, have a look at the following image, which shows this DHTML control in action.
Having said that, here's the picture in question:
After seeing the above screen shot, you'll have to agree with me that the Scriptaculous package makes it really easy to create sliders that use a predefined range of offset values. Nonetheless, if you're anything like me, you may want to examine a concrete hand-on example that demonstrates how to include this type of slider into a sample web page.
So, bearing in mind this possibility, below I coded a simple (X)HTML file that precisely displays the aforementioned DHTML control. Its source code 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 horizontal slider with predefined offset
values</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:'horizontal',minimum:0,maximum:200,alignX:0,range:$R
(0,200),values:[0,50,100,150,200],onSlide:function(v)
{$('slidervalue').innerHTML='slide value: '+v},onChange:function
(v){$('slidervalue').innerHTML='changed value: '+v}});
}
Event.observe(window,'load',initializeSlider,false);
</script>
<style type="text/css">
h1{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}
#slider{
width: 200px;
height: 6px;
background: #ccc;
}
#handle{
width: 8px;
height: 12px;
background: #f90;
}
#slidervalue{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Example of horizontal slider with predefined offset
values</h1>
<div id="slider">
<div id="handle"></div>
</div>
<div id="slidervalue"></div>
</body>
</html>
If you study the above example, you'll see that building a slider that utilizes predefined offset values is only a matter of specifying the corresponding offset range, via the respective $R function (please remember that this function comes bundled with the Prototype library), in addition to indicating how these offset values will be displayed when moving the slider. Of course, this last process is achieved by using a "values" parameter, which is passed to the already familiar "Control.Slider" object. Quite simple, isn't it?
So far, so good. At this stage I showed you how to incorporate some useful features into the basic set of sliders that come packaged with the Scriptaculous animation framework. Therefore, the question here is: what comes next?
Well, since I'm assuming that you already learned the process of working with these handy sliders, the last section of this article will show how to expand the existing functionality of these controls, by adding to them a simple but useful progress bar.
Want to see how this will be achieved? Keep reading.
Next: Improving the functionality of basic sliders >>
More DHTML Articles
More By Alejandro Gervasio
/ 4 
