Slider
Um slider com um marcador (padrão WAI-ARIA), com o valor copiado para um input hidden.
Instalação
O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:
O item slider do registry instala estes arquivos:
-
app/components/ui_component.rb -
app/components/ui/slider_component.rb -
app/helpers/ui/slider_helper.rb -
app/javascript/controllers/ui_slider_controller.js -
vendor/shadwire/shadwire.css
Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.
Ainda não instalou a CLI? gem install shadwire e depois shadwire init.
Uso
Exemplos
Padrão
Arraste o marcador ou use as setas do teclado.
Referência da API
Toda parte aceita class / class_name e **attrs.
| Componente | Argumento | Padrão | Descrição |
|---|---|---|---|
Slider |
min |
0 |
O menor valor. |
Slider |
max |
100 |
O maior valor. |
Slider |
step |
1 |
Quanto as setas e o arraste movem o valor. |
Slider |
value |
0 |
O valor inicial. |
Slider |
name |
nil |
O nome do input oculto que envia o valor; sem ele não há input. |
Slider |
label |
nil |
O nome acessível do marcador (aria-label). |
Slider |
disabled |
false |
Desabilita: não recebe clique e o teclado o pula. |