Yelotofu ~ “In building standards compliant sites we are creating a better Web for the future.”

jQuery Numeric Stepper

Tags: JavaScript, jquery, numericstepper, spinner, stepper, ui, widget

As an experiement I ported over my Accessible Numeric Stepper into a jQuery widget and added some accessibility enhancements and new features in the process.

This widget utilises ui.core.js - a factory method object for creating widget classes. Widgets in jQuery are essentially plugins at heart but built to follow stricter coding standards in order to unify the underlying quality between developers. It also adds convenient mouse interaction classes and option settings among other things.

The result is jQuery Numeric Stepper an unofficial jQuery UI widget. Features include:

min, max, start and step size settings
supports decimal values and decimal step sizes
supports currency values
keyboard and mousewheel interaction - increment/decrement values via cursor keys, +/- keys and mousewheel

Download latest source code here

Bugs? Missing feature? Code improvements? Let me know!

Update: Features seen here are now part of the official jQuery UI Spinner, set for the 1.6 release of jQuery UI. More details.

21st Jul 2008, 3:19 am | RSS 2.0 | Comment | Trackback

Similar Posts

7 Comments

By Richard D. Worth at 21 Jul 2008 8:39 pm

Very nice work! I would offer only two suggestions: It would be nice if you could hold down a button instead of having to click click click. Same thing with an up or down key.

Love the mousewheel interaction. Thanks for sharing.
By caphun at 22 Jul 2008 4:43 am

@richard: Just updated ui.stepper.js to include the mouse hold feature you suggested. Get latest via same download link.

This was pretty easy to add as I basically copied ui.spinner.js for this part.

Will look into the hold feature on up down keys.
By caphun at 22 Jul 2008 9:04 pm

OK, made some improvements.

* Holding up and down keys now supported
* Did some code refactoring
* A change event fires after keyboard or mouse release.
By Laurence at 21 Aug 2008 8:56 pm

Bravo !!
But why is the numpad disabled on the input text ?
By caphun at 21 Aug 2008 11:44 pm

Thanks Laurence, that is now fixed!
By Laurence at 22 Aug 2008 4:02 pm

What a reactivity !
I added also a ‘type=”button”‘ for spinner-up and spinner-down because Firefox treated them like submit buttons.
Thanks for sharing !
By Recent Links Tagged With "stepper" - JabberTags at 1 Oct 2008 7:04 pm

[...] Stamina Extended Stride Elliptical Stepper - Best Price! Saved by thepinkbismuth on Mon 29-9-2008 jQuery Numeric Stepper Saved by kubaKT on Mon 29-9-2008 Stamina SpaceMate Folding Stepper Saved by pllyrain on Mon [...]

Leave a Reply

The Meta