YUI-based numeric stepper widget

Since I had some problems with YUI slider, I decided to write a YUI-based numeric stepper that allows users to select values within a predefined range.

To instantiate the widget include the following files :

 
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="stepper/stepper.css" />
 
<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
 
<!-- Stepper source file -->
<script type="text/javascript" src="stepper/stepper-min.js"></script>
 

Then place your stepper in your body :

 
<div id="stepperValue">10 px</div>
<div class="stepperControls">
<div id="stepperUp"><img src="stepper/add.gif" /></div>
<div id="stepperDown"><img src="stepper/sub.gif" /></div>
</div>
<div style="clear:both"></div>
 

The stepperValue id will display the current value of the stepper.
The stepperControls will contain the different controls for our stepper, and you can place it anywhere you want and use whatever images you want.

Finally when the DOM is ready, instantiate the widget :

 
<script type="text/javascript">			
	YAHOO.util.Event.onDOMReady(function(){
		var mystepper = new YAHOO.widget.Stepper(10, 'stepperUp', 'stepperDown', 0, 200, 10);
		mystepper.onChange.subscribe(function(){
			YAHOO.util.Dom.get('stepperValue').innerHTML = mystepper.getValue() + ' px';
		});
</script>
 

The stepper takes 6 parameters, all mandatory (check source code) :

 
var mystepper = new YAHOO.widget.Stepper(10, 'stepperUp', 'stepperDown', 0, 200, 10);
 

• 1. the initial value
• 2. the ID of the element for the up control button
• 3. the ID of the element for the down control button
• 4. the minimum value the stepper can decreased to
• 5. the maximum value the stepper can increased to
• 6. by how much the stepper is incremented/decremented after each click

We listen for any change to the stepper and in this case, display the updated value in the container we defined earlier on ( stepperValue) using innerHTML.

 
mystepper.onChange.subscribe(function(){
			YAHOO.util.Dom.get('stepperValue').innerHTML = mystepper.getValue() + ' px';
		});
 

You can get the current value of the stepper by calling :

 
var currentValue = mystepper.getValue();
 

Live demo
Download source code (including demo)