Ravox KitFormulário
Deslizante
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
Polegares
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/deslizante.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. |