Go to homepage

Projects /

Number Input

Number input field with custom increment buttons.

View Demo

How to

The Number Input component allows you to choose a number in a specific range. It uses the native <input type="number"> element.

When JavaScript is enabled, two custom increment buttons are added; those buttons can be used to increment/decrement the value of the input.

To change the range of possible values, you can modify the min and the max attributes of the input element; you can also define a step using the step attribute (default is 1).

Dynamic Content #

If your input element is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the InputNumber object:

var inputNumberEl = document.getElementsByClassName('js-number-input')[0];
new InputNumber(inputNumberEl);

Categories

Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.