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

Lightweight Touch-friendly Input Stepper For jQuery - Stepper.js
File Size: 57.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.