jQuery Numeric Stepper

Usage

1. Download latest and extract to a convenient place
2. Copy jquery, themes, and ui folders into your project
3. Past the following into the HTML head

   <link rel="stylesheet" type="text/css" href="./themes/ui.stepper.css" media="screen,projection" />
   <script type="text/javascript" src="./jquery/jquery-1.2.6.js"></script>
   <script type="text/javascript" src="./jquery/jquery.mousewheel.js"></script>
   <script type="text/javascript" src="./ui/ui.core.js"></script>
   <script type="text/javascript" src="./ui/ui.stepper.js"></script>
   <script type="text/javascript">
   	$('#ns').stepper();
   </script>
   

4. Create the HTML for ui.stepper to hook into

   <span id="ns" class="ui-stepper">
   	<input type="text" name="ns_textbox" size="2" autocomplete="off" class="ui-stepper-textbox" />
   	<button type="submit" name="ns_button_1" class="ui-stepper-plus">+</button>
   	<button type="submit" name="ns_button_2" class="ui-stepper-minus">-</button>
   </span>
   

5. Take a look at the examples below for further customisation

Examples

Example 1: Negative range

$('#ns_1').stepper({
	min:-360, 
	max:360, 
	step:45,
	start:0
});

Degrees: + -

Example 2: Decimals

$('#ns_2').stepper({
	min:0,
	max:1,
	step:0.01, 
	decimals:2
});

Small increment: + -

Example 3: Currency

$('#ns_3').stepper({
	step:0.5, 
	format:'currency'
});

Price: + -

Read the original blog post