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

Preview:

Description:

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
$ npm install ispin --save

import ISpin from 'ispin';

Or load the ispinjs from a CDN.

<link rel="stylesheet" href="https://unpkg.com/ispin/dist/ispin.css">
<script defer src="https://unpkg.com/ispin"></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

});