Lightweight Touch-friendly Input Stepper For jQuery - Stepper.js

Stepper.js is a lightweight jQuery plugin that converts the native number input into an user-friendly spinbox with up/down buttons to increment/decrement a numeric value.

How to use it:

1. Insert the number input and up/down buttons into a container with the CSS class of 'js-spinner'.

<div class="js-spinner">
  <input type="number" step="1" max="100" min="0" data-stepper-debounce="400" class="js-stepper">
  <button type="button" spinner-button="up" title="add 1">+1</button>
  <button type="button" spinner-button="down" title="subtract 1">-1</button>
</div>

2. Put jQuery library and the jQuery stepper.js right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="stepper.js"></script>

3. Feel free to style the number stepper in the CSS.

input { ... }

button { ... }

4. Set the debounce rate via data-stepper-debounce as this.

<input type="number" step="1" max="10" min="0" data-stepper-debounce="500" class="js-stepper">

Change log:

2017-04-13

• If user fills in amount that exceeds max value reset to max value, same goes for min value

---

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