Flex: multi stepper / time stepper

This one was started from the need of a Time Stepper.
You know… that thing which you set your computer’s clock with. It consists of input fields for hours/minutes/seconds, up and down buttons and some functionality.

So I have made one.
But then I thought why not making it even more generic?!
So I have made one…

My Flex multi stepper (MultiStepper) have these self-explanatory fields:

  • numInputs : number of desired inputs for the multi stepper.
  • maximumPerInput : array of numbers, each representing the maximum allowed value for its corresponding field.
  • minimumPerInput : array of numbers, each representing the minimum allowed value for its corresponding field.
  • stepSizePerInput : array of numbers, each representing the step-size for its corresponding field.
  • valuePerInput : array of numbers, holding the current values for each of the fields.
  • Inputs : array of MultiStepperInputs, holding each of the input fields from inside the MultiStepper.

I have also made a use of a custom event: MultiStepperEvent.
This event have 3 vars:

  • changedValue : number, zero based position of the field that was changed.
  • oldValues : array of numbers, holding the values before the last change.
  • newValues : array of numbers, holding the values after the last change.

up/down/left/right key will also increase/decrease the current field’s value, tab/shift+tab move between fields.

I think the code speaks for itself, so take a look at the classes to see what I have done.

Comments are welcomed.

Demo is here (right click for source)
Source is here

Leave a comment