Stepper (aka NumericUpDown) widget in Javascript

This page demonstrates how to create a stepper widget (also known as a NumericUpDown widget) on a webpage using Javascript. This technique degrades gracefully, displaying a regular text field if Javascript is disabled.

Click the arrow once to increment or decrement once. Click and hold to increase or decrease the count rapidly. This script supports minimum and maximum values (append a class to the input box such as "min_1_max_25") and filters out non-numeric values.

View source of this page to see how the technique is accomplished.

Before:

min: 1, max: 25

After:

min: 1, max: 25

The CSS used here:

.stepper_widget {vertical-align:top;}
.stepper_widget input{width:25px;}
.stepper_widget button{margin:0;padding:0;border:0;background-color:transparent;width:20px;cursor:pointer;}
.stepper_widget .upbutton{position:relative;top:-6px;}
.stepper_widget .dnbutton{position:relative;top:5px;left:-20px;}

Licensing

Creative Commons License This code is licensed under the Creative Commons Attribution 3.0 United States License. You are permitted to redistribute and/or modify this work for commercial or noncommercial purposes provided proper attribution to the original author (me) is present in the redistribution.