Incremento/decremento de una entrada numérica con botones arriba/abajo-ispinjs

Vista prévia

Descripción

ispinjs es una pequeña, personalizable, extensible JavaScript de entrada de la biblioteca de Spinner que permite al usuario aumentar o disminuir una entrada de número con botones arriba/abajo.

Funcionamiento

Instale los ispinjs con NPM.

# NPM
$ npm install ispin --save

import ISpin from 'ispin';

O cargue los ispinjs de una red CDN.

<link rel="stylesheet" href="https://unpkg.com/ispin/dist/ispin.css">
<script defer src="https://unpkg.com/ispin"></script>

Cree un campo de texto normal para el Spinner de entrada.

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

Inicialice los ispinjs en el campo de texto y listo.

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


// options here
});

Config el Spinner de entrada reemplazando las siguientes opciones.

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

});