Adding More Features to Sliders with the Scriptaculous Framework - Improving the functionality of basic sliders
(Page 4 of 4 )
In consonance with the concepts that I expressed in the previous section, I'm going to demonstrate how to create a couple of regular sliders which also display a basic progress bar.
Logically, this progress bar can be useful only in limited situations, but the purpose of showing the respective examples is to demonstrate how to take advantage of the handy "onSlide" and "onChange" handlers that are accepted by the "Control.Slider" object used in all the examples that you learned before.
Please take a look at the following pair of code listings. The first one shows how to include an horizontal slider that also displays a simple progress bar, while that the second example demonstrates the same situation using a vertical control.
The examples are accompanied by two additional screen shots, which hopefully will help to clarify even more how these improved DHTML sliders work.
<!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 progress bar</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',{range:$R
(0,20),values:
[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
onSlide:function(v){$('slidervalue').innerHTML='slider value:
'+v; $('progressbar').style.width=(v*2)+'px';},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;
}
#progressbar{
width: 0;
height: 8px;
background: #f90;
margin-top: 10px;
border: 1px solid #999;
}
</style>
</head>
<body>
<h1>Example of horizontal slider with progress bar</h1>
<div id="slider">
<div id="handle"></div>
</div>
<div id="progressbar"></div>
<div id="slidervalue"></div>
</body>
</html>
<!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 with progress bar</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',alignX:0,range:$R(20,0),values:
[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
onSlide:function(v){$('slidervalue').innerHTML='slider value:
'+v; $('progressbar').style.width=(v-2)+'px';},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: 6px;
height: 200px;
background: #ccc;
}
#handle{
width: 12px;
height: 8px;
background: #f90;
}
#slidervalue{
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin-top: 10px;
}
#progressbar{
width: 20px;
height: 8px;
background: #f90;
margin-top: 10px;
border: 1px solid #999;
}
</style>
</head>
<body>
<h1>Example of vertical slider with progress bar</h1>
<div id="slider">
<div id="handle"></div>
</div>
<div id="progressbar"></div>
<div id="slidervalue"></div>
</body>
</html>
As shown above, the implementation of a basic progress bar along with the corresponding slider is only a matter of including an additional DIV into a sample web document, where the width of this containing element is modified as the slider moves across its sliding track.
As usual with many of my articles on web development, feel free to modify all the hands-on examples shown here. This will help you understand more quickly how to use include these simple yet powerful sliders into your own web-based user interfaces. Happy coding!
Final thoughts
That's all for now. In this two-part series, I walked you through the basics on how to use the set of DHTML sliders that come integrated with the Scriptaculous animation framework. If you're thinking about incorporating this type of web-based control into the front end of your existing or future web applications, this library might be a good option.
See you in the next web development tutorial!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 4 
