Componentes
Slider
betaAjuste de um valor contínuo onde a grandeza importa mais que o número exato — teto de gastos, volume, faixa etária.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/slider
Playground
<Slider aria-label="Meta de sessões" defaultValue={[50]} />Uso
Ajusta um valor dentro de um intervalo conhecido. Não serve para escolher entre opções. O controle acessível é o `<input type="range">` dentro da alça: sem `Label` visível, `aria-label` é obrigatório — o wrapper o repassa para cada alça.
Intervalo
`min` e `max` definem o intervalo válido. O padrão é 0 a 100 — mude quando a escala do domínio for outra.
Passo
`step` trava o valor em incrementos. Use quando frações não fazem sentido no domínio — nota de 0 a 10 em passos inteiros, por exemplo.
Faixa
Dois valores em `defaultValue` criam um par de alças — útil para delimitar um intervalo, como a faixa de acerto aceitável em uma avaliação.
Vertical
`orientation="vertical"` inverte o eixo. Reserve para painéis onde a altura conta uma história — volume, progresso acumulado.
Desabilitado
Trava a alça no lugar e reduz a opacidade. O valor continua visível.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
Slider
| Prop | Tipo | Padrão |
|---|---|---|
| getAriaLabel | ((index: number) => string) | — |
Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.
Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.
Origem do dado
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css