Slider

Formulario

Controle de arraste para escolher um valor ou um intervalo numérico, horizontal ou vertical.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Slider } from "@trdr/ui/slider"

Uso

import { Slider } from "@trdr/ui/slider"

export function Exemplo() {
  return <Slider />
}

Props

SliderPropsestende React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
PropTipoDescrição
thumbLabel?[string, string]Rotulo acessivel de cada thumb quando o slider e um intervalo (dois thumbs). O Radix nao propaga `aria-label`/`aria-labelledby` do Root para o(s) Thumb, que e quem carrega `role="slider"` de verdade: para valor unico o `aria-label` normal ja resolve (o componente encaminha para o thumb sozinho), mas um unico rotulo nao diferencia dois thumbs. Use `thumbLabel` com uma tupla, na ordem [minimo, maximo].

Quando usar

Use o Slider quando o usuario precisa escolher um numero dentro de uma faixa conhecida e o valor exato importa menos que o gesto de ajuste rapido: volume, alavancagem, tamanho de posicao, faixa de preco num filtro. Passe um array com um numero para valor unico, ou com dois para um intervalo (dois pontos de arraste, tipo "de X ate Y").

Quando nao usar

Nao use Slider quando o valor precisa ser digitado com precisao (um preco de entrada, uma quantidade exata de ordem): use Input numerico, com o Slider no maximo como atalho visual ao lado. Nao use para selecao entre poucas opcoes discretas sem relacao de ordem (isso e ToggleGroup ou RadioGroup), mesmo que as opcoes sejam numeros.

Anatomia

  • Slider (data-slot="slider"): a raiz, que recebe value/defaultValue, min, max, step, orientation (horizontal ou vertical) e disabled.
  • slider-track (data-slot="slider-track"): a trilha inteira, do minimo ao maximo.
  • slider-range (data-slot="slider-range"): o trecho preenchido da trilha, sempre em bg-primary (o ciano da marca aqui e preenchimento de controle, nao fundo de botao).
  • slider-thumb (data-slot="slider-thumb"): o ponto de arraste. Um thumb para valor unico, dois para intervalo. A quantidade de thumbs vem do tamanho do array de valor, nao de uma prop separada.

Acessibilidade

Cada thumb e focavel por Tab e navega por teclado: seta para a direita ou para cima aumenta o valor, seta para a esquerda ou para baixo diminui, Home vai ao minimo, End vai ao maximo, todos herdados do primitivo do Radix sem configuracao adicional. Todo Slider sem rotulo visivel ao lado precisa de aria-label (ou aria-labelledby apontando para o rotulo). O estado desabilitado usa o atributo disabled nativo do primitivo, nunca so opacidade: o teclado e o arraste param de responder junto com o visual.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="slider"][data-slot="slider-range"][data-slot="slider-thumb"][data-slot="slider-track"]
8 tokens usados
bg-backgroundbg-primarybg-surface-tertiaryborder-primaryoutline-nonering-offset-2ring-offset-backgroundring-ring