Yelotofu

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

jQuery Numeric Stepper

Tags: , , , , , ,

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 PDT | RSS 2.0 | Comments are closed

Similar Posts

« Banana Apple Orange?
jQuery: outerHTML »

15 Comments

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

    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.

  2. By caphun at 22 Jul 2008 4:43 am PDT

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

  3. By caphun at 22 Jul 2008 9:04 pm PDT

    OK, made some improvements.

    * Holding up and down keys now supported
    * Did some code refactoring
    * A change event fires after keyboard or mouse release.

  4. By Laurence at 21 Aug 2008 8:56 pm PDT

    Bravo !!
    But why is the numpad disabled on the input text ?

  5. By caphun at 21 Aug 2008 11:44 pm PDT

    Thanks Laurence, that is now fixed!

  6. By Laurence at 22 Aug 2008 4:02 pm PDT

    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 !

  7. By Recent Links Tagged With "stepper" - JabberTags at 1 Oct 2008 7:04 pm PDT

    [...] 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 [...]

  8. By antoine at 13 Dec 2008 8:08 pm PST

    Hey , Im having trouble with setting The max option dynamically, after calling $(”#div”).stepper(max:MaxValue); i try calling $(”#div”).stepper(max:MaxValue2) to try and change the max value but it only works if MaxValue2 is less than MaxValue otherwise it does not switch it. any clues ?

    Tony

  9. By antoine at 13 Dec 2008 8:12 pm PST

    Great Job , Just what i needed , except that im not being able to dynamically change the Max Value.
    i initialize with :
    $(”#div”).stepper(max:MaxValue)

    and then to change i call $(”#div”).stepper(max:MaxValue2)

    but it only changes when MaxValue2 is less than MaxValue. Any Suggestions?

  10. By caphun at 13 Dec 2008 10:36 pm PST

    Thanks Antoine. Hmm, tbh I’ve not tried changing the max value after setting it initially as I haven’t found the need to yet.

    There should be a few in-built event handlers one of which is the change event, e.g.:

    $(’#div’).stepper({
    max: MaxValue,
    change: function(event, ui){
    iu.options.max = maxValue2;
    }
    });

    Let me know if that doesn’t work as I’ve not tested this myself.

    Thanks!

  11. By antoine at 13 Dec 2008 10:51 pm PST

    Thanks Caphun, I need to alter the max property from another function so i tried $(’#div’).stepper.options.max = value
    $(’#div’).options.max = value

    they dont work and im not sure how to make it work .

  12. By caphun at 13 Dec 2008 11:41 pm PST

    Ah I see, try this:

    $(’#div’).data(’max.stepper’, value);

  13. By Jay at 9 Feb 2009 3:40 am PST

    Thanks! spent four hours, evaluated five different slider controls. All of them didn’t work correctly in one aspect or another.
    Wouldn’t place cursor on startup, couldn’t get to display at all (Why doesn’t anyone include working css with their source?). Wouldn’t limit values to increment value specified, etc.

  14. By Jay at 9 Feb 2009 4:35 am PST

    I’m trying to hook in events and not having very good luck. Are you propagating the change event?

    $(’#CharacterPoints’).stepper( { min:25, max:500, step:5, start:100, change: function(event, ui){ alert(’changed’); } } );

  15. By caphun at 9 Feb 2009 1:56 pm PST

    @jay: Yes, the change event should fire with the above code.

    Note: I merged this code a while ago into UI spinner (still in development), see

    http://yelotofu.com/2008/08/jquery-ui-spinner/

    Discussions should continue on the spinner article as the stepper is no longer in active development.

    Thanks all for the great comments!