jQuery Numeric Stepper

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.

  • http://rdworth.org/ Richard D. Worth

    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.

  • caphun

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

  • caphun

    OK, made some improvements.

    * Holding up and down keys now supported

    * Did some code refactoring

    * A change event fires after keyboard or mouse release.

  • Laurence

    Bravo !!

    But why is the numpad disabled on the input text ?

  • caphun

    Thanks Laurence, that is now fixed!

  • Laurence

    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 !

  • Pingback: Recent Links Tagged With "stepper" - JabberTags

  • http://www.aczentgroup.com antoine

    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

  • http://www.aczentgroup.com antoine

    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?

  • caphun

    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!

  • http://aczentgroup.com antoine

    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 .

  • caphun

    Ah I see, try this:

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

  • Jay

    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.

  • Jay

    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'); } } );

  • caphun

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

  • Alex

    it seems I can type smth like that —–

  • Matthew

    Having trouble with the currency input. Seems when clicking or click and hold on the buttons it does not always step to the cents. Works fine with the mousewheel. Any help would be great