Slider
Seleção de valor numérico por meio de controle arrastável. Suporta modos de valor único e intervalo (dois controles), marcas de passo e exibição de valor em tempo real. Funciona de forma independente ou dentro de formulários Rails com campos ocultos para envio.
Pré-visualização e Código
_slider.html.erb
███
██████ █████████ █████████
██████ █████
███ ██████ ████████████████████ ██████ █████████ ██████ ███ ███████████ ████ ██
█████ █████
███ ██████ ████████████████████ █████ ███████ ██████ ██████ ███████ ██████████ ███ ██████████ ███
█████████ ████████████ █████████ ████████████ ███████████ ████ ██
slider_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █
████████
███████
████████
███████████
███████████
███████████████
slider_component.html.erb
████ ██████████ █████████████████ ███
████████████████████████
██████████████████████████ ████ ███
██████████████████████████ ████ ███
███████████████████████████ █████ ███
████████████████████████████ ██████ ██ █ ███
████████████████████████████████ ██████████ ███
████████████████████████████████ ██████████ ███
███████████████████████████ █████ ████
slider_component.rb
█ ██████████████████████ ████
█████ ███████████████ █ ███████████████████
███ ███████████
█████ ████████
████ ██
████ ████
█████ ██
██████ ████
██████████ ████
slider_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █
████████
███████
████████
███████████
███████████
███████████████
Changelog
- 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
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora