Slider
Selección de valor numérico mediante control arrastrable. Soporta modos de valor único y rango (dos controles), marcas de paso y visualización de valor en tiempo real. Funciona de forma independiente o dentro de formularios Rails con campos ocultos para el envío.
Vista Previa y Código
_slider.html.erb
███
██████ █████████ █████████
██████ █████
███ ██████ ████████████████████ ██████ █████████ ██████ ███ ███████████ ████ ██
█████ █████
███ ██████ ████████████████████ █████ ███████ ██████ ██████ ███████ ██████████ ███ ██████████ ███
█████████ ████████████ █████████ ████████████ ███████████ ████ ██
slider_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █
████████
███████
████████
███████████
███████████
███████████████
slider_component.html.erb
████ ██████████ █████████████████ ███
████████████████████████
██████████████████████████ ████ ███
██████████████████████████ ████ ███
███████████████████████████ █████ ███
████████████████████████████ ██████ ██ █ ███
████████████████████████████████ ██████████ ███
████████████████████████████████ ██████████ ███
███████████████████████████ █████ ████
slider_component.rb
█ ██████████████████████ ████
█████ ███████████████ █ ███████████████████
███ ███████████
█████ ████████
████ ██
████ ████
█████ ██
██████ ████
██████████ ████
slider_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █
████████
███████
████████
███████████
███████████
███████████████
Registro de Cambios
- Initial release with single and range modes
- Step marks support with auto-generation or custom label arrays
- Live value tooltip display above thumb(s)
- Keyboard navigation (Arrow keys, Home, End)
- Touch support for mobile devices
- Hidden inputs for Rails form submission
- Dark mode support with slate palette
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso