Required markup

<div class="if numeric-stepper">
  <button type="button" class="if down" aria-label="Remove 1"></button>
  <input
    type="number"
    id="numeric-stepper-adults-01"
    name="numeric-stepper-adults-01"
    class="if"
    value="2"
    max="9"
    min="0"
    aria-live="polite"
    tabindex="-1"
  />
  <label for="numeric-stepper-adults-01" class="if"> Adults </label>
  <span class="if input-help">18 +</span>
  <span class="if input-error">18 +</span>
  <button type="button" class="if up" aria-label="Add 1"></button>
</div>

NumericStepper

Kind: global class

• NumericStepper
  • new NumericStepper()
  • .stepperEl : Element
  • .inputEl : Element
  • .incrementButtonEl : Element
  • .decrementButtonEl : Element
  • .maxLengthCheck(e)
  • .isNumeric(e) ⇒ boolean
  • .init()

new NumericStepper()

A library to set up usage of the Numeric Stepper Component

numericStepper.stepperEl : Element

Kind: instance property of NumericStepper

numericStepper.inputEl : Element

Kind: instance property of NumericStepper

numericStepper.incrementButtonEl : Element

Kind: instance property of NumericStepper

numericStepper.decrementButtonEl : Element

Kind: instance property of NumericStepper

numericStepper.maxLengthCheck(e)

Check if event target value is over max length, and reduces value.

Kind: instance method of NumericStepper

numericStepper.isNumeric(e) ⇒ boolean

Check if the given keydown event is a numeric key

Kind: instance method of NumericStepper

numericStepper.init()

Initialize

Kind: instance method of NumericStepper