Curseur
Sélection de valeur numérique via une poignée déplaçable. Prend en charge les modes valeur unique et plage (deux poignées), les repères de pas et l'affichage en direct de la valeur. Fonctionne en autonome ou dans les formulaires Rails avec des champs cachés pour la soumission.
Aperçu et code
_slider.html.erb
███
██████ █████████ █████████
██████ █████
███ ██████ ████████████████████ ██████ █████████ ██████ ███ ███████████ ████ ██
█████ █████
███ ██████ ████████████████████ █████ ███████ ██████ ██████ ███████ ██████████ ███ ██████████ ███
█████████ ████████████ █████████ ████████████ ███████████ ████ ██
slider_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █
████████
███████
████████
███████████
███████████
███████████████
slider_component.html.erb
████ ██████████ █████████████████ ███
████████████████████████
██████████████████████████ ████ ███
██████████████████████████ ████ ███
███████████████████████████ █████ ███
████████████████████████████ ██████ ██ █ ███
████████████████████████████████ ██████████ ███
████████████████████████████████ ██████████ ███
███████████████████████████ █████ ████
slider_component.rb
█ ██████████████████████ ████
█████ ███████████████ █ ███████████████████
███ ███████████
█████ ████████
████ ██
████ ████
█████ ██
██████ ████
██████████ ████
slider_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █
████████
███████
████████
███████████
███████████
███████████████
Journal des modifications
- 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
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant