Adding More Features to Sliders with the Scriptaculous Framework - Coding an improved horizontal slider
(Page 2 of 4 )
As I stated in the introduction of this article, the Scriptaculous library allows you to easily create sliders that are capable of displaying additional information aside from the basic elements, such as the handles themselves and the sliding tracks. In this case, by using the already familiar "Control.Slider" object that you learned in the previous tutorial, along with a few extra input parameters, it's possible to build sliders that display offset information.
To be even more illustrative, the look and feel of this brand new kind of DHTML control is shown in the screen shot below:
In this case, the previous image depicts the visual appearance of a horizontal slider, which also displays offset data. However, I'm pretty certain that you want to see the pertinent source code that renders this specific type of slider, so below I included a hands-on example which displays the horizontal slider that you saw in the previous picture.
Here is the code listing:
<!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 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',
{axis:'horizontal',minimum:0,maximum:200,alignX:0,
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 offset information</h1>
<div id="slider">
<div id="handle"></div>
</div>
<div id="slidervalue"></div>
</body>
</html>
As you can see, building an horizontal slider that shows offset values is indeed a straightforward process. The operation is reduced to calling the appropriate callback functions with the respective "onSlide" and "onChange" handlers. Logically, these callback functions are passed in as additional parameters to the "Control.Slider" object used previously, which demonstrates the remarkable versatility of the object in question.
Okay, now that you know how to code a horizontal slider capable of displaying offset information, it's a good time to learn how to create sliders that move the respective handles at predefined offset intervals.
This will be a really instructive experience. If you want to see how these DHTML controls will be built, please click on the link that appears below and keep reading.
Next: Building a slider with predefined offset values >>
More DHTML Articles
More By Alejandro Gervasio
/ 5 
