Slider

Em andamento

Controle deslizante para escolher um número numa faixa: trilha preenchida até o valor, pontos de parada quando há step, e rótulos nas pontas para escala qualitativa. Por baixo, um <input type="range"> nativo.

Função: Formulário e ação
Também chamado de: controle deslizante, range, régua, barra de ajuste
Mora em: app/components/atoms/Slider.tsx
Última mudança: 2026-09-30

Ver como MarkdownFicha no Storybook

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Variante Contínuo, ao vivo — vem da ficha.Abrir sozinha

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

Quando usar

Quando o valor exato importa menos que a posição na faixa — desconto, intensidade, "mais rápido ou mais completo".

Faça

Dê um label: é o nome do controle, e o valor aparece ao lado dele.
Use formatarValor para mostrar a unidade ("35%", "R$ 400"); o mesmo texto vai para o leitor, por aria-valuetext.
Use rotuloMin e rotuloMax quando a escala for qualitativa.
Use step para paradas: até 21, aparecem como pontos na trilha.

Evite

Faixa enorme com passo 1 e sem teclado em mente: de 0 a 1000, a seta anda de 1 em 1.
Esconder o valor: sem ele, a pessoa ajusta às cegas.

Quando não usar. Para um número exato (idade, CEP, quantidade precisa), use o Input. Para poucas opções nomeadas, o Radio ou o Select.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

Rótulo e valor — O `label` à esquerda e o valor formatado à direita (o valor fica fora do nome acessível).
Trilha — 12px de altura, em `--border-interactive`, preenchida em `--primary` até o valor.
Pontos de parada — Com `step`, até 21 pontos discretos sobre a trilha.
Polegar — 28px, branco com borda de controle e duas setas dentro — desenhado sobre o polegar nativo, que fica invisível e recebe o ponteiro. O tamanho tem uma fonte só, `--slider-polegar` (E61): os dois polegares e a posição do preenchimento leem dela.
Pontas — `rotuloMin` e `rotuloMax` embaixo, ligados ao controle por `aria-describedby` — somados à descrição que vier de fora (E61).

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
Estado	O que muda
Padrão	Trilha preenchida até o valor; polegar sobre ele.
Foco	O anel de foco (`anel-de-foco`) no polegar desenhado, pelo `peer-focus-visible`, só no teclado.
Desabilitado	Trilha e polegar a 50%, cursor proibido.

Comportamento

Como a peça reage em cada situação
Situação	O que acontece
Arrastar ou clicar na trilha	O valor muda e o preenchimento e o polegar acompanham — o polegar nativo, invisível, é que recebe o ponteiro.
Com `step`	O valor anda de parada em parada — medido: de 40 a 60 a 80 com passo 20.

Relacionados

Como usar no código

A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.

import { Slider } from '@/app/components/atoms/Slider';

<Slider />

Propriedades

Lidas do código da peça no build — não escritas à mão.

Propriedades de Slider
Prop	Tipo	Padrão	Obrigatória	Descrição
`label`	`string`	—	não	—
`min`	`number`	`0`	não	—
`max`	`number`	`100`	não	—
`step`	`number`	`1`	não	—
`value`	`number`	—	não	—
`defaultValue`	`number`	—	não	—
`rotuloMin`	`string`	—	não	Rótulo na ponta esquerda, como "Mais rápido".
`rotuloMax`	`string`	—	não	Rótulo na ponta direita, como "Mais inteligente".
`formatarValor`	`(valor: number) => string`	`String`	não	Como o valor aparece ao lado do rótulo. Padrão: o número.

Aceita também: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue'>.

Medidas

Medidas das partes
Parte	Valor	Classe
Área do controle	44px de altura	`h-alvo-toque`
Trilha	12px	`h-3`
Polegar	28 × 28px	`size-(--slider-polegar)`
Pontos de parada	6px	`size-1.5`

Tokens de cor

Os tokens semânticos que o código da peça usa, com o valor de hoje em app/globals.css.

Tokens de cor usados por Slider
Token	Valor	Usado como
`--border-interactive`	`#8C8C8C`	`bg-border-interactiveborder-border-interactive`
`--card`	`#FFFFFF`	`bg-cardbg-card/60`
`--foreground`	`#1A1A1A`	`text-ink`
`--muted-foreground`	`#595959`	`text-muted-foreground`
`--primary`	`#D42B2B`	`bg-primary`
`--primary-foreground`	`#FFFFFF`	`bg-primary-foreground/50`

Teclado

Teclas e o que fazem
Tecla	Faz
`Tab`	Leva o foco ao controle; o anel acende no polegar.
`→↑`	Aumenta um passo — medido: 35% → 36% → 37%.
`←↓`	Diminui um passo.
`Page UpPage Down`	Aumenta ou diminui um passo maior — medido no Chrome: 10% da faixa (35% → 45%), nunca menos que o `step`.
`HomeEnd`	Vai ao mínimo ou ao máximo — medido: 0% e 100%.

Leitor de tela

O que é anunciado, e por quê.

O valor é lido por aria-valuetext, já formatado ("36%"). O número ao lado do rótulo é aria-hidden — sem isso, o nome do controle mudaria a cada passo.
Trilha, preenchimento, pontos e polegar desenhado são aria-hidden: quem ouve recebe tudo do <input>.
Dentro de um FormField, a dica e o erro chegam pelo aria-describedby e somam-se às pontas (E61) — antes as pontas apagavam a descrição de fora.

O que sustenta o estado

Esta peça usa formulario. O estado dela é o de quem já foi ouvido com leitor de tela nesses padrões — e não uma passada sobre esta peça em específico.

Falta ouvir: formulario — ver docs/a11y-screen-reader-checklist.md.

Status e recursos

Onde a peça existe e em que estado
Tipo	Recurso	Status
Código	`app/components/atoms/Slider.tsx`	Disponível
Ficha	Storybook (abre em outra aba)	Disponível
Teste de acessibilidade	axe em `npm run test`	No gate de todo commit
Leitor de tela	Passada da E33	Falta ouvir
Design	Figma	Desativado até a Fase 2

Histórico

Os últimos commits que tocaram o arquivo, lidos do git no build.

0298af82026-09-30E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito

O histórico completo está no GitHub (abre em outra aba).