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
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
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.valueLowinput.valueHigh
5. jRange
jRange es un complemento de jQuery bastante simple para crear un selector de rango.
4. 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
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
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
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.
Conviertete en un programador más sociable