Lightweight & Mobile-friendly Input Spinner – input-touchspin

Category: Form , Javascript | February 9, 2023
Author:erwinstone
Views Total:342 views
Official Page:Go to website
Last Update:February 9, 2023
License:MIT

Preview:

Lightweight & Mobile-friendly Input Spinner – input-touchspin

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'))

You Might Be Interested In:


Leave a Reply