Number Input
Number input field with custom increment buttons.
Projects /
Projects /
Number input field with custom increment buttons.
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).
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);
