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.
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)
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)
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.