Number input

Number inputs are used to increase or decrease numeric values, and they require JavaScript to increment and decrement the value when the buttons are pressed. This piece of JavaScripts makes the number increase and decrease when the buttons are pressed and enables and disables the buttons when the number exceeds the min and max limits.

Default

Call the function chi.numberInput and pass the input element as parameter.

<div class="m-form__item -row">
  <div class="m-input__wrapper">
    <input id="input-number-1" type="number" class="a-input" value="0" aria-label="Input label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

<script>chi.numberInput(document.getElementById('input-number-1'));</script>

Expanded version

<div class="m-inputNumber">
  <input id="input-number-2" class="a-input" type="number" value="0" min="0" max="3" aria-label="Input label">
  <button class="a-btn -icon" aria-label="Decrease">
    <div class="a-btn__content">
      <i class="a-icon icon-minus"></i>
    </div>
  </button>
  <button class="a-btn -icon" aria-label="Increase">
    <div class="a-btn__content">
      <i class="a-icon icon-plus"></i>
    </div>
  </button>
</div>

<script>chi.numberInput(document.getElementById('input-number-2'));</script>

Options

This component accepts options to configure its behavior.

Example autofix=true

This example only accepts values between 0 and 6, and as the step is 2 and initial value is 1, only even values are valid. If you manually write any pair value, or a value greater than 5 or lesser than 1, the component will automatically correct the value.

<div class="m-inputNumber">
  <input id="input-number-3" class="a-input" type="number" value="1" min="0" max="6" step="2" aria-label="Input label">
  <button class="a-btn -icon" aria-label="Decrease">
    <div class="a-btn__content">
      <i class="a-icon icon-minus"></i>
    </div>
  </button>
  <button class="a-btn -icon" aria-label="Increase">
    <div class="a-btn__content">
      <i class="a-icon icon-plus"></i>
    </div>
  </button>
</div>
<script>
  chi.numberInput(
    document.getElementById('input-number-2'),
    {autofix: true}
  );
</script>

Preventing memory leaks

Input number components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elem = document.getElementById('input-number-1');
var inputNumberComponent = chi.numberInput(elem);
// do stuff
inputNumberComponent.dispose();

TipIt is safe to call the numberInput method more than once, as it will return any previously created number input component associated to the input.

var elem = document.getElementById('input-number-1');
var inputNumberComponent = chi.numberInput(elem);
var elem2 = document.getElementById('input-number-1');
var inputNumberComponent2 = chi.numberInput(elem2);
inputNumberComponent === inputNumberComponent2; // returns true

inputNumberComponent.dispose(); // Only have to do it once.