Range Slider
Proporciona integración con la biblioteca rangeslider.js para mejorar los elementos de entrada de rango HTML5 con una interfaz de deslizador hermosa y personalizable.
range_slider
Instalar
composer require 'drupal/range_slider:^2.1'
composer require 'drupal/range_slider:8.x-1.5'
Overview
El módulo Range Slider proporciona integración con Drupal de la popular biblioteca JavaScript rangeslider.js. Envuelve los elementos de entrada de rango HTML5 con una interfaz de deslizador mejorada que ofrece mejor retroalimentación visual y experiencia de usuario.
El módulo proporciona tanto un widget de campo para usar con tipos de campo integer, decimal y float, como una API de elemento de formulario que los desarrolladores pueden usar en formularios personalizados. Soporta orientaciones horizontal y vertical, y puede mostrar opcionalmente el valor actual en varias posiciones relativas al deslizador.
Para sitios que usan el módulo Webform, Range Slider también proporciona un elemento de webform que puede añadirse a cualquier webform, permitiendo a los constructores de formularios recopilar valores numéricos usando una interfaz de deslizador intuitiva.
Features
- Widget de campo para tipos de campo integer, decimal y float que renderiza un deslizador de rango visual en lugar de una entrada numérica estándar
- Elemento de formulario personalizado (#type => 'range_slider') para usar en formularios y módulos personalizados
- Soporte para orientaciones de deslizador horizontal y vertical
- Visualización opcional del valor de salida posicionada debajo, arriba, a la izquierda o a la derecha del deslizador
- Prefijo y sufijo personalizables para los valores mostrados (ej., '$50 USD')
- Integración con Webform proporcionando un elemento de deslizador de rango para constructores de webform
- Usa la biblioteca rangeslider.js cargada desde CDN (jsDelivr) para compatibilidad con navegadores modernos
- Respeta la configuración de valores mínimo y máximo del campo desde la configuración del campo
- Procesamiento de elemento de formulario compatible con AJAX
- CSS limpio y minimalista con espaciado de márgenes para una integración de diseño adecuada
Use Cases
Selección de cantidad de producto
Usa Range Slider en páginas de productos de comercio electrónico para permitir a los clientes seleccionar cantidades. Configura con valores min/max apropiados y muestra el valor actual arriba o debajo del deslizador para una retroalimentación clara.
Encuestas de calificación o satisfacción
Implementa escalas de satisfacción o sistemas de calificación donde los usuarios deslizan para indicar su nivel de acuerdo o satisfacción en una escala numérica.
Filtrado por rango de precios
Crea selectores de rango de precios en filtros expuestos de Views o formularios de búsqueda personalizados, permitiendo a los usuarios seleccionar visualmente su rango de presupuesto.
Controles de volumen o intensidad
Usa deslizadores de orientación vertical para controles de volumen, configuraciones de intensidad, o cualquier interfaz que se beneficie de una metáfora de deslizador vertical.
Selección de monto de donación
Permite a los donantes seleccionar montos de donación usando un deslizador, con opciones de prefijo y sufijo para mostrar símbolos de moneda y unidades (ej., '$50 USD').
Entrada numérica en Webform
Para sitios que usan Webform, añade elementos de deslizador de rango a formularios que recopilan datos numéricos como rangos de edad, preferencias de cantidad, o calificaciones numéricas.
Tips
- Los valores mínimo y máximo del campo se respetan - configúralos en los ajustes del campo para limitar el rango del deslizador
- Usa la configuración 'output' para mostrar retroalimentación del valor en tiempo real mientras los usuarios arrastran el deslizador
- Para entradas de precio o moneda, usa #output__field_prefix y #output__field_suffix para añadir símbolos de moneda
- Los deslizadores verticales funcionan bien para controles de volumen o cuando el espacio horizontal es limitado
- El deslizador se adjunta automáticamente a formularios habilitados para AJAX y se reinicializa después de actualizaciones AJAX
- Cuando uses la API de elemento de formulario, todas las propiedades del elemento Range del core se heredan (como #step para valores de incremento)
Technical Details
Hooks 1
hook_help
Implementa hook_help() para mostrar el contenido del README.md en la página de ayuda del módulo. Si el módulo Markdown está instalado, el README se renderiza como HTML formateado; de lo contrario, se muestra como texto preformateado.