Numeric Stepper

v0.0.0

A numeric stepper component is a UI element for managing numeric values within a set range. It includes an input field and buttons for incrementing and decrementing the value in specified steps.

The numeric stepper functions accurately up to two decimal places.* If higher decimal accuracy is recuired please contact us.

Due to the nature of decimal calculations in JavaScript, unexpected results may occur, such as 0.1 + 0.2 returning 0.30000000000000004 instead of the expected 0.3.

<!-- Form  -->
<form action="#form-37a99a" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-127756">Add an amount
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Numeric Stepper  -->
    <div class="vi-numeric-stepper" data-form-field-proxy="true" role="group">
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--decrement" type="button">
          <span class="sr-only">Subtract</span>
        </button>
      </div>
      <div class="vi-numeric-stepper__input">
        <input aria-describedby="help-dcce34" aria-required="true" class="form-control" id="control-127756" max="10" min="5" name="name-927560" placeholder="Add an amount" required role="spinbutton" step="1" type="number" value="1">
      </div>
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--increment" type="button">
          <span class="sr-only">Add</span>
        </button>
      </div>
    </div>
    <div id="help-dcce34" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
</form>

Accent #

Conform the form styling, when the form is using modifier --accent the numeric stepperuses the correct coloring.

<!-- Form (mods: --accent) -->
<form action="#form-d42340" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-cea6a8">Add an amount
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Numeric Stepper  -->
    <div class="vi-numeric-stepper" data-form-field-proxy="true" role="group">
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--decrement" type="button">
          <span class="sr-only">Subtract</span>
        </button>
      </div>
      <div class="vi-numeric-stepper__input">
        <input aria-describedby="help-80a05d" aria-required="true" class="form-control" id="control-cea6a8" min="-10" name="name-ddd654" placeholder="Add an amount" required role="spinbutton" step="0.1" type="number" value="1.5">
      </div>
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--increment" type="button">
          <span class="sr-only">Add</span>
        </button>
      </div>
    </div>
    <div id="help-80a05d" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
</form>

Match input size #

Use modifier .vi-numeric-stepper--sm to match the 'small' input fields.

<!-- Form  -->
<form action="#form-7d7928" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-b0bac5">Add an amount
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Numeric Stepper (mods: --sm) -->
    <div class="vi-numeric-stepper vi-numeric-stepper--sm" data-form-field-proxy="true" role="group">
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--decrement" type="button">
          <span class="sr-only">Subtract</span>
        </button>
      </div>
      <div class="vi-numeric-stepper__input">
        <input aria-describedby="help-2bed91" aria-required="true" class="form-control-sm form-control" id="control-b0bac5" min="0" name="name-5122a4" placeholder="Add an amount" required role="spinbutton" step="1" type="number" value="1">
      </div>
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--increment" type="button">
          <span class="sr-only">Add</span>
        </button>
      </div>
    </div>
    <div id="help-2bed91" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
</form>

Compact #

Use modifier .vi-numeric-stepper--compact the have compact stepper buttons.

<!-- Form  -->
<form action="#form-acd7b4" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-3b37e4">Add an amount
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Numeric Stepper (mods: --compact) -->
    <div class="vi-numeric-stepper vi-numeric-stepper--compact" data-form-field-proxy="true" role="group">
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--decrement" type="button">
          <span class="sr-only">Subtract</span>
        </button>
      </div>
      <div class="vi-numeric-stepper__input">
        <input aria-describedby="help-d00863" aria-required="true" class="form-control" id="control-3b37e4" min="0" name="name-726aa3" placeholder="Add an amount" required role="spinbutton" step="1" type="number" value="1">
      </div>
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--increment" type="button">
          <span class="sr-only">Add</span>
        </button>
      </div>
    </div>
    <div id="help-d00863" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
  <div class="form-group">
    <label for="control-d42b75">Add an amount
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Numeric Stepper (mods: --compact, --sm) -->
    <div class="vi-numeric-stepper vi-numeric-stepper--compact vi-numeric-stepper--sm" data-form-field-proxy="true" role="group">
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--decrement" type="button">
          <span class="sr-only">Subtract</span>
        </button>
      </div>
      <div class="vi-numeric-stepper__input">
        <input aria-describedby="help-ad35aa" aria-required="true" class="form-control-sm form-control" id="control-d42b75" min="0" name="name-4b5058" placeholder="Add an amount" required role="spinbutton" step="1" type="number" value="1">
      </div>
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--increment" type="button">
          <span class="sr-only">Add</span>
        </button>
      </div>
    </div>
    <div id="help-ad35aa" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
</form>

Dynamic props #

Props min, max, step and value can be set dynamically.

<!-- Form  -->
<form action="#form-408931" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="input">Add an amount
      <span aria-hidden="true" class="vi-form__required">(required)</span></label>
    <!-- Numeric Stepper  -->
    <div class="vi-numeric-stepper" data-form-field-proxy="true" role="group">
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--decrement" type="button">
          <span class="sr-only">Subtract</span>
        </button>
      </div>
      <div class="vi-numeric-stepper__input">
        <input aria-describedby="help-3b6918" aria-required="true" class="form-control" id="input" max="10" min="0" name="name-427719" placeholder="Add an amount" required role="spinbutton" step="1" type="number" value="1">
      </div>
      <div class="vi-numeric-stepper__control">
        <button class="vi-btn vi-numeric-stepper__button vi-numeric-stepper__button--increment" type="button">
          <span class="sr-only">Add</span>
        </button>
      </div>
    </div>
    <div id="help-3b6918" class="vi-form__feedback vi-form__feedback--hint">This is optional help text for the field above.</div>
  </div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Check the value in the querystring</button>
  <hr>
  <!-- Button type: solid  -->
  <button id="step" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Toggle step
    <span>1</span></button>
  <!-- Button type: solid  -->
  <button id="min" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Toggle min
    <span>0</span></button>
  <!-- Button type: solid  -->
  <button id="max" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Toggle max
    <span>10</span></button>
  <!-- Button type: solid  -->
  <button id="value" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Set value
    <span>1</span></button>
  <hr>
  <p>Please note that validation is not included by default. If you want to validate against new values trigger the <code>change</code> event on the input field.</p>
  <script>
    $(function() {
      var input = $('#input');
      var step = 1;
      var min = 5;
      var max = 10;
      var value = 1;

      $('#step').on('click', function() {
        step = step === 1 ? 0.1 : 1;
        input.attr('step', step).trigger('change');
        $(this).find('span').text(step);
      });

      $('#min').on('click', function() {
        min = min === -5 ? 0 : -5;
        input.attr('min', min).trigger('change');
        $(this).find('span').text(min);
      });

      $('#max').on('click', function() {
        max = max === 10 ? 5 : 10;
        input.attr('max', max).trigger('change');
        $(this).find('span').text(max);
      });

      $('#value').on('click', function() {
        value = value === 1 ? 5 : 1;
        input.val(value).trigger('change');
        $(this).find('span').text(value);
      });
    })
  </script>
</form>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  25 Feb 2025 - fix(numeric-stepper): enforce min/max limits and align values in increment/decrement methods
  24 Feb 2025 - fix(numeric-stepper): manually trigger change event on input after attribute updates
  24 Feb 2025 - feat(numeric-stepper): dynamic min, max, and step attributes
  12 Jul 2023 - Respect the ‘step’ attribute. When float, allow float chars.
  22 Jun 2023 - Allow numeric number mobile chrome android Huawei
  16 May 2023 - Disable enter key on input.
  16 May 2023 - Disable validation message when clicking stepper buttons.
  16 May 2023 - Do not allow exponential numbers (like 2e5)
  13 Apr 2023 - Fix check if number. (palmface)


Added

  07 Apr 2023 - Initial draft


Change

  16 Aug 2023 - Disable “+” button if current value + step > max number.
  31 May 2023 - Only allow numbers and backspace for numeric stepper input.