Small Accessible jQuery Number Input Plugin - Numbler

Numbler.js is a small jQuery plugin that allows for greater consistency and control over the experience and styling of the number input, across browsers. Since Numbler is based on the input[type="number"], if JavaScript is unavailable, it continues to work as it would in browsers that support the number input, and falls back to a standard text input in browsers that don't support the number input.

Basic usage:

1. Load the stylesheet style.css in the head section that will provide the primary CSS styles for the number input.

<link href="style.css" rel="stylesheet">

2. The html markup. The inclusion of the aria-controls, role="alert" and aria-live="assertive" helps make these custom controls more accessible by providing necessary functional clarity to assistive technologies, like screen readers. The following attributes will have default values set if they are not added to the initial state of the number input:

• min
• max
• step

<label for="unique_ID">
  Label:
</label>
<div class="number-input-area">
  <input type="number" id="unique_ID" name="unique_ID" min="-10" step="1" class="js-numbler">

  <div class="btn-pill-area btn-pill-area--numbers">
    <button type="button" class="btn js-num-up" aria-controls="unique_ID">
      <span class="is-visually-hidden">Increase</span>
      <span aria-hidden="true">+</span>
    </button>

    <button type="button" class="btn js-num-down" aria-controls="unique_ID">
      <span class="is-visually-hidden">Decrease</span>
      <span aria-hidden="true">-</span>
    </button>
  </div>
</div>

3. Load jQuery library and the jQuery Numbler plugin's script at the bottom of the document. That's it.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="numbler.js"></script>

Change log:

2016-04-19

• JS cleanup

---

This awesome jQuery plugin is developed by scottaohara. For more Advanced Usages, please check the demo page or visit the official website.