Ravox KitFormulário
Slider
Escolha de um número ou de um intervalo arrastando: um ou dois polegares, passo, marcas com rótulo, valor visível e balão. Setas, PageUp/PageDown e Home/End em cada polegar; manda o valor com name e funciona no Controller do React Hook Form.
Arredondamento dos cantos
Ajustes
Ligar e desligar
Exemplos
Filtro de preço em formulário comum
Com React Hook Form
Salvar só ao soltar
Volume do alerta de venda
Salvo: 60%
Sem rótulo visível
Instalação
O shadcn cria components/ui/deslizante.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/slider.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| valor / padrao | number | [number, number] | — | Valor atual (controlado) ou no começo. Um par vira intervalo com dois polegares. |
| aoTrocar | (valor) => void | — | A cada passo, arrastando ou no teclado. |
| aoSoltar | (valor) => void | — | Quando solta o polegar ou termina a tecla: bom para salvar ou buscar. |
| aoSair | () => void | — | Quando o foco sai do deslizante (o onBlur do Controller). |
| min / max / passo | number | 0 / 100 / 1 | Limites e o tamanho de cada passo (aceita decimal). |
| marcas | boolean | (number | { valor, rotulo? })[] | — | true: uma marca por passo (até 21). Ou os valores, com rótulo embaixo quando tiver. |
| rotulo | ReactNode | — | Rótulo ligado aos polegares (aria-labelledby). Sem ele, passe aria-label. |
| dica / erro | ReactNode | — | Nota embaixo. O erro pinta a faixa e os polegares, marca aria-invalid e é lido junto com eles. |
| mostrarValor | boolean | true | Valor formatado ao lado do rótulo. |
| balao | boolean | false | Balão com o valor em cima do polegar enquanto arrasta ou está com foco. |
| formatar | (valor: number) => string | — | Como o valor aparece e é lido pelo leitor de tela (aria-valuetext). |
| nomesPolegares | [string, string] | ["mínimo", "máximo"] | Nome de cada polegar no intervalo, para leitores de tela. |
| name | string | — | Manda o valor em <input type="hidden">; no intervalo, dois com o mesmo name. |
| disabled | boolean | false | Trava o arraste e o teclado e não manda o valor. |
| ref | Ref<HTMLInputElement> | — | Vai no input (range nativo) do primeiro polegar: o Controller foca nele quando há erro. |