Increment/Decrement A Number Input With Up/Down Buttons – ispinjs

Category: Form , Javascript | November 28, 2018
Views Total:9,445 views
Official Page:Go to website
Last Update:November 28, 2018


Increment/Decrement A Number Input With Up/Down Buttons – ispinjs


ispinjs is a small, customizable, extendable JavaScript input spinner library that enables the user to increment/decrement a number input with up/down buttons.

How to use it:

Install the ispinjs with NPM.

$ npm install ispin --save
import ISpin from 'ispin';

Or load the ispinjs from a CDN.

<link rel="stylesheet" href="">
<script defer src=""></script>

Create a normal text field for the input spinner.

<input id="number-input" type="text" value="">

Initialize the ispinjs on the text field and done.

let spinner = new ISpin(document.getElementById('number-input'), {
    // options here

Config the input spinner by overriding the following options.

let spinner = new ISpin(document.getElementById('number-input'), {
    // wrapper class
    wrapperClass: 'ispin-wrapper'
    // button class
    buttonsClass: string,
    // step size
    step: 1,
    // page step
    pageStep: 20,
    // repeat interval
    repeatInterval: 200,
    // enable overflow
    wrapOverflow: false,
    // parse
    parse: string => number,
    // format
    format: number => string,
    // disable the input spinner
    disabled: false,
    // min/max values
    max: 100,
    min: 0,
    // onChange callback
    onChange: null

You Might Be Interested In:

Leave a Reply