BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Selectores de rangos numéricos en jQuery

23/SEP/2013 6.751 visitas Ver comentarios
Selectores de rangos numéricos en jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Todos sabemos, supongo, que HTML5 introduce nuevos tipos de campos para nuestros formularios. Entre las nuevas incorporaciones, tenemos campos de tipo email, de tipo number, de tipo date y muchos más.

Aunque la mayoría de las virtudes de estos nuevos campos los vemos en los dispositivos móviles, ya que nuestro smartphone nos abrirá el teclado que corresponda a cada tipo de campo o un calendario en el caso del tipo date, hay un campo nuevo en especial al que quiero referirme en esta entrada.

Se trata nada menos que el nuevo campo de tipo RANGO que nos permite seleccionar un valor numérico con unas flechas o botones a su derecha que incrementará o reducirá el valor numérico según el valor de cambio que indiquemos y, se incrementará o reducirá dentro del rango de valores que hayamos definido.

Explicándolo más fácil nos permite, por ejemplo, cambiar el valor de input de texto (de número en este caso) entre un valor A y B incrementando o disminuyendo con cada click por un valor X. Imagina elegir un valor entre 1 y 10 con un incremento/disminución de 0.5 en cada click que hacemos en los controles que adjunta al input.

Qué ventajas tenemos de usar este tipo de plugins
La de siempre, que HTML5, salvo que orientes tu desarrollo a smartphones, choca con las versiones antiguas de Internet Explorer que todavía circulan por ahí, por lo que usar este tipo de campo no estará mal sino que degradará a un campo de tipo texto por defecto (Nota: todos los nuevos campos de HTML5 degradan a un input de tipo text si el navegador no lo soporta).

Al transformar nuestro input, podemos usar un campo de texto, un campo range o lo que queramos ya que el plugin en cuestión se ocupará de transformarlo en el elemento de selección por nosotros.

Qué inconvenientes tenemos
Que si el campo se degrada a un input de tipo text, necesitarás una validación extra para comprobar que el usuario no está insertando caracteres no numéricos además que obligamos al usuario a escribir, cuando siempre es más ventajoso dejarlo mover o seleccionar desde controles, con lo que nos aseguraremos que el valor ingresado esté siempre dentro de los rangos que necesitamos.

Y de cuál me vas a hablar
Esta vez no te voy a hablar de ninguno en particular sino que voy a poner una recopilación de varios indicando su enlace y su ventaja y desventaja. Vamos a ello...

  • Numeric Stepper
    A mi es el que más me gusta, sencillo, fácil de implementar, bonito y funciona realmente bien. Puede tomar valores desde el atributo DATA de HTML5. Visitar enlace.
  • Stepper
    Muy similar al anterior. Funciona desde IE8 y pide como mínimo jQuery 1.7. Visitar enlace.
  • jStepper
    No me entusiasma demasiado porque funciona con el movimiento de la rueda del ratón y no agrega controles para aumentar o disminuir el valor. Visitar enlace.
  • jQuery UI Spinner
    Similar al resto con la diferencia que requiere de jQuery UI para funcionar aunque no es un desarrollo oficial de los desarrolladores de jQuery UI. Visitar enlace.

Hasta aquí mi pequeña recopilación, si conoces alguno que uses mejor que estos que te dejo y quieres compartirlo conmigo, con mucho placer lo agregaré a la lista.

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 22 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018