JQuery Plugin: Web SpinButton / SpinBox Control

This page demontrates a Web Spin-Button control using only a textbox.

A Slider control is also possible using the same principle (work in progress).
There's also a Plugin to provide more query :selectors for JQuery's XPath-like syntax.

Ordinary textbox:

Textbox with SpinButton class applied:

JQuery This control employs the thoroughly excellent JQuery Library written by John Resig. Hats off to him, its a great tool.

No extra html markup is added to produce the buttons, just simple CSS and some unobtrusive javascript to handle the mouse events.

Please send feedback/comments to
george.jquery (at) softwareunity.com
(I won't be able to offer help or support though, sorry!)
Some comments received so far.

Features:

Major update with code from Mark Gibson after he found this plugin on the JQuery Plugins page. Thank you Mark, you did some superb work on it! This page has been updated with all his changes (27-Sep-2006)
Is now a proper JQuery Plugin (27-Sep-2006)
Accepts initialisation options (for min/max limits, step size etc) (27-Sep-2006)
Spins when you hold mouse button down (27-Sep-2006)
Set upper and lower (min/max) limits, eg 0 to 100 (09-Sep-2006)
Set increment step size, eg 5 (09-Sep-2006)
Responds to up/down keys (13-Aug-2006)
Responds to mouse wheel (13-Aug-2006) Also in Firefox (09-Sep-2006)
Adds no extra html elements to page (uses only css bg images for button effect). It remains an input element (type=text) even though it looks like a spin control

Ideas / To do:

Done: Improve multi-browser support (most differences are down to the way each browser gives us the position of the element relative to the mouse)
Done: Provide params to set min and max limits (currently no limit)
Done: Provide param to set step size (currently inc/decrements by 1)
Done: Respond to press-and-hold on buttons to 'spin' the value
Consider non numeric data such as a list or time
Disallow non-numeric text (or other invalid values as appropriate)
Done: Respond to keyboard up/down keys (maybe left/right & page up/dn too)
Consider other styles or button positions to match browser/OS
Publish a compact edition of the code

Known issues:

Up/down bottons not visible in Safari. (Kindly reported by Olav V. on 13-Dec-2006)
Fast clicking fires dblclick event. Fixed (09-Sep-2006)
If you want to use textboxes with different (non-default) height you will need to create button images for them. So far this only handles one (standard) height throughout the page
It uses padding-right to prevent text value from covering arrow buttons but this causes input element to widen in some circumstances. The padding does not do such a good job in IE
Fixed: Bug when min or max limits set to zero. (03-Mar-2007) With thanks to Andrei Bejenaru for mailing the fix to me.

You may half-inch this for your own use:

Download JQuery, SpinBtn js, SpinBtn css and SpinBtn image files.
Refer to the css, scripts and class like this: <head> <link type="text/css" rel="stylesheet" href="JQuerySpinBtn.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="JQuerySpinBtn.js"></script> </head> <body> <input type="text" class="suSpinButton" /> </body>