Lightweight & Mobile-friendly Input Spinner – input-touchspin

Preview:

Description:

input-touchspin is a lightweight, framework-agnostic, and touch-enabled input spinner component written in Vanilla JavaScript.

With input-touchspin, users can increment or decrement values by clicking/tapping the Plus & Minus buttons, making it easier to enhance the user experience when entering numerical values on mobile and desktop devices.

How to use it:

1. Install and import the input-touchspin.

# NPM
$ npm i @erwinstone/input-touchspin

<script src="input-touchspin.min.js"></script>

// OR
import InputTouchspin from './path/to/input-touchspin.module.js'

2. Add the data-touchspin-input attribute to the number input and wrap it together with the increment/decrement buttons to the touchspin container.

<div class="touchspin">
  <button type="button" data-touchspin-down>-</button>
  <input type="number" data-touchspin-input style="text-align: center">
  <button type="button" data-touchspin-up>+</button>
</div>

3. Initialize the input-touchspin. That’s it.

new InputTouchspin(document.querySelector('.touchspin'))