DHTML

Adding More Features to Sliders with the Scriptaculous Framework

As you probably know, the Scriptaculous animation framework comes equipped with a module for building DHTML-based sliders. If you want to learn how to include these controls in your own web pages, start reading this article now! Welcome to the final part of the series that began with "Using sliders with the Scriptaculous framework." Comprised of two tutorials, this series gets you started quickly using these powerful DHTML controls, and shows you how to incorporate them into your existing web-based graphical interfaces.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

May 01, 2007

TABLE OF CONTENTS:

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 >>