Los spinners son un elemento adicional para los input que nos permiten incrementar o decrementar valores númericos mediante 2 flechas o a través de teclado, manteniendo la funcionalidad original del elemento input.
Podemos ver un ejemplo de como quedaría en la siguiente imagen:
Para poder implementar este elemento debemos de descargarnos las librerías correspondientes. Podeis descargalas de aqui: ui.spinner.js y ui.core.js
Necesitamos también tener incluida la librería de JQuery en nuestra página.
Lo primero que debemos hacer es incluirlo todo en nuestro proyecto. Para ello:
<head> <script src="jquery.js" type="text/javascript"></script> <script src="ui.core.js" type="text/javascript"></script> <script src="ui.spinner.js" type="text/javascript"></script> </head>
Para poder usar el sript debemos aplicarlo sobre un input. En nuestro ejemplo vamos a usar un HTML como el siguiente:
<input type="text" name="valor" id="spinner" />
Hecho esto, ya podemos incluir el script de forma correcta. para ellos vamos a sustituir el input que hemos escrito por el spinner, y además, para que sea más completo el ejemplo, vamos a hacer que tenga 2 decimales y que incluya el simbolo de "$" para que el usuario sepa de que tipo de valor estamos hablando:
$('#spinner').spinner(
{min: -100, max: 100, decimals: 2, currency: '$', step:1}
);
Con esto habremos convertido nuestro input original en un input con spinner que tiene como límites de valores -100 y 100, que tiene 2 decimales, que añade el simbolo de $ y que además, al clicar sobre las flechas o manejarlo con le teclado se va a incrementar o decrementar en 1 unidad("step").
Esto es un ejemplo muy sencillo pero la librería poosee numerosas opciones de configuración que podemos ver en la siguiente documentación.