Ve nuestra revisión de 7 de los mejores complementos de reemplazo de entrada de rango de código abierto.

Top 7: plugins de JavaScript y jQuery para reemplazar los inputs de rango

Un RangeInput es básicamente un componente de interfaz de usuario de control deslizante de rango numérico con campos de entrada, donde puede definir un valor mínimo y máximo y el usuario puede filtrar algunas cosas con él. Todo el mundo sabe lo aburrido que es el diseño predeterminado.

En esta parte superior, compartiremos con usted 7 de los complementos de reemplazo de entrada de rango más importantes, mejor documentados y bien diseñados que puede integrar fácilmente en sus proyectos web.

7. Powerange

Github

Powerange

Powerange es un control deslizante de rango, inspirado en gran medida en iOS 7 y la serie de televisión "Power Rangers". Es fácilmente personalizable, tanto por CSS como por JavaScript. Con sus muchas características, que incluyen cambio de color y estilo general, cambio entre estilo horizontal y vertical, valores mínimos, máximos e iniciales personalizados, intervalo de pasos personalizado, visualización de valores decimales, visualización de iconos en lugar de números mínimos / máximos, es una interfaz de usuario realmente poderosa herramienta para usar en su sitio web. Una gran solución para varios navegadores, compatible con: Google Chrome 14+, Mozilla Firefox 6.0+, Opera 11.6+, Safari 5+, IE 9+

6. Multirango

Github

Polyfill HTML5 de varios rangos

Multirange es un pequeño polyfill para controles deslizantes de múltiples manijas HTML5. Cuenta con:

  • ¡Solo 0,6 KB minificado y comprimido con gzip!
  • Sin dependencias.
  • Utiliza la detección de funciones, no se ejecutará si los controles deslizantes de dos manijas son compatibles de forma nativa.
  • Teclado accesible
  • Hacer clic en la pista todavía funciona
  • Las manijas se pueden mover una al lado de la otra
  • Estilo personalizable
  • Propiedades JS polyfilled también ( input.value, , ) input.valueLow input.valueHigh

5. jRange

Github

jSelector de rango de rango

jRange es un complemento de jQuery bastante simple para crear un selector de rango.

4. Rangeslider.js

Github

Complemento Rangeslider.js

Polyfill JavaScript / jQuery simple, pequeño y rápido para el elemento deslizante HTML5 <input type = "range">. Puedes ver muchos ejemplos aquí . Características de este complemento:

  • Compatible con pantalla táctil
  • Recalcula tan adecuado para su uso dentro de diseños receptivos onresize 
  • Pequeño y rápido
  • Admite todos los navegadores principales, incluido IE8 +

3. UI de control deslizante redondo

Github

UI de control deslizante redondo

El control deslizante redondo (también se puede llamar como control deslizante circular , control deslizante radial ) es un complemento de jQuery que permite al usuario seleccionar un valor o rango de valores. No solo es un control deslizante redondo, también admite las formas de un cuarto, medio y círculo circular . Hay tres tipos de controles deslizantes disponibles, como predeterminado, rango mínimo y control deslizante de rango. Los controles deslizantes de rango mínimo y predeterminado son similares a los que se utilizan para seleccionar un valor único entre los valores mínimo y máximo. En el caso del control deslizante de rango, se utiliza para seleccionar un rango de valores. Como roundSlider usa la transición CSS3 para animaciones, podemos usar cualquier otro estilo de transición para diferentes efectos de animación.    

Para usar una animación diferente, basta con cambiar la propiedad CSS de "función de tiempo de transición".

2. noUiSlider

Github

noUiSlider

noUiSlider es un control deslizante de rango liviano con soporte táctil completo y un montón de funciones. Funciona con casi cualquier dispositivo, ya sea que tenga un mouse, pantalla táctil o ambos, y funcionará muy bien en diseños receptivos. Cuenta con:

  • Diseño receptivo amigable
  • Soporte táctil para iOS, Android y Windows (teléfono)
  • Soporte ARIA
  • ¡Sin dependencias!
  • Probado en IE9: IE11, Edge, Chrome, Opera, Firefox y Safari

noUiSlider es de código abierto (MIT) y puede usarlo de forma gratuita en cualquier producto personal o comercial. No se requiere atribución.

1. IonRangeSlider

Github

IonRangeSlider

IonRangeSlider es un control deslizante de rango fácil de usar, flexible y sensible con soporte para la piel. Características de este complemento:

  • Ion.RangeSlider: control deslizante de rango fresco, cómodo, sensible y fácilmente personalizable
  • Admite eventos y métodos públicos, tiene configuraciones flexibles, se puede modificar completamente con CSS
  • Navegador cruzado: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
  • Ion.RangeSlider admite dispositivos táctiles (iPhone, iPad, Nexus, etc.).
  • Ion.RangeSlider se distribuye libremente bajo los términos de la licencia MIT . 
  • Con este complemento, podrá crear hermosos controles deslizantes de rango.
  • Soporte para la piel. (6 pieles incluidas)
  • Cualquier cantidad de controles deslizantes en una página sin conflictos ni grandes problemas de rendimiento.
  • Dos tipos de control deslizante simple (1 control deslizante) y doble (2 controles deslizantes)
  • Soporte de valores negativos y fraccionarios
  • Posibilidad de configurar un paso personalizado y ajustar la cuadrícula al paso
  • Soporte de diapasón de valores personalizados
  • Cuadrícula de valores personalizable
  • Posibilidad de deshabilitar elementos de la interfaz de usuario (mínimo y máximo, valor actual, cuadrícula)
  • Sufijos y prefijos para sus números ($ 20, 20 €, etc.)
  • Sufijo adicional para el valor máximo (por ejemplo, $ 0 - $ 100 + )
  • Capacidad para embellecer grandes números (por ejemplo, 10000000 -> 10000000 o 10.000.000)
  • Slider escribe su valor directamente en el campo de valor de entrada. Esto hace que sea fácil de usar en cualquier formato HTML.
  • Cualquier valor del control deslizante se puede configurar a través del atributo de datos de entrada (por ejemplo, data-min = "10")
  • El control deslizante admite desactivar el parámetro. Puede configurarlo como verdadero para que el control deslizante esté inactivo
  • Slider admite métodos externos (actualizar, restablecer y eliminar) para controlarlo después de la creación
  • Para usuarios avanzados, el control deslizante tiene devoluciones de llamada (onStart, onChange, onFinish, onUpdate). El control deslizante pega todos sus parámetros para devolver el primer argumento como objeto
  • El control deslizante admite fecha y hora

Si conoce otra biblioteca de reemplazo de entrada de rango impresionante escrita en Vanilla JS o jQuery, compártala con la comunidad en el cuadro de comentarios.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores