Back to Numeric Stepper-guidelines

JavaScriptThe latest version of this package is: 0.17.4, Opens in new window

JavaScript library for the Numeric Stepper Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-js/numeric-stepper@0.17.4

Table of Contents

Usage

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>

Api

NumericStepper

Kind: global class

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

Param Type
e Event

numericStepper.isNumeric(e) ⇒ boolean

Check if the given keydown event is a numeric key

Kind: instance method of NumericStepper

Param Type
e Event

numericStepper.init()

Initialize

Kind: instance method of NumericStepper

Contact us, Opens in new window