---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 12
titulo: "Slider — `estável` · validado pelo Rafael em 2026-08-03 (preview v0.13 + suite de 63 testes)"
sequencia: 14 de 98
bytes_do_corpo: 4327
md5_do_corpo: d1d78e8c13524626604443632e723614
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 12. Slider — `estável` · validado pelo Rafael em 2026-08-03 (preview v0.13 + suite de 63 testes)

> **Base (3 rodadas):** R1 — NN/g (aproximado basta; precisão = façanha motora; coarse+fine linked), Baymard (filtro numérico SEMPRE com campos; dual: track click não seta). R2 — M3 (discreto/ticks), Morningstar/Semrush (range+inputs). R3 — APG slider/multithumb, W3C (range REAL por baixo: TalkBack), WCAG 2.5.7 (herda F4), Angular Material (track 3:1). L1–L6 conferidas no consolidado.

### 12.1 Papel e a regra do par

Valor aproximado em faixa conhecida. **Padrão SEED: slider SEMPRE pareado com o campo número do §5** (mesmo componente, stepper opcional) — coarse no trilho, fine no campo (L1). Valor preciso exigido → só o §5, sem slider. Casos: filtros de faixa no ERP (potência, valor); simulador do site ("Quanto você paga de luz?") — aproximado e lúdico, pareado.

### 12.2 Decisões L1–L6

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| L1 | Par obrigatório slider+número | NN/g/Baymard; o par resolve 2.5.7 por definição | Slider sozinho (precisão impossível) |
| L1-b (v0.13) | O campo pareado consome o PARSER CANÔNICO do §5 (parseFlex/E3) no blur — nunca parser próprio | Validação executada 2026-08-03: o preview chamava helper inexistente (`parseNum`) e o caminho "digitar o valor exato" quebrava com ReferenceError; um parser só = uma semântica de vírgula/milhar | Helper local por componente |
| L2 | Alternativas 2.5.7: clique no trilho posiciona (single) + teclado (setas passo, PageUp/Down 10×, Home/End) + campo pareado | F4 abriu o precedente; teclado NÃO basta sozinho pro 2.5.7 | Só arrasto |
| L3 | `input type="range"` REAL sempre — estilizado (princípio G2, "nativo primeiro") | W3C: swipe do TalkBack só funciona em range real | Div-slider com ARIA (quebra toque assistivo) |
| L4 | Dual thumb (faixa): 2 ranges sobrepostos, ambos no Tab, ordem constante; clique no trilho NÃO seta — instrui ("arraste as alças ou digite nos campos"); min/max interdependentes com folga mínima de 1 passo | APG multithumb; Baymard: clique ambíguo em dual frustra | Um thumb "esperto" que rouba o clique |
| L5 | `aria-valuetext` humanizado ("R$ 1.500", "75 kWp"); trilho ativo 3:1 sobre o inativo | Angular Material; leitor fala a unidade | "1500" seco |
| L6 | Ticks só discreto ≤10 passos | M3 | Régua milimetrada decorativa |

### 12.3 Anatomia e tokens

Trilho 6px radius 999 (**`--seed-slider-track` = cinza-500 `#788F9D` light / cinza-600 `#617683` dark**; ativo `--seed-action-primary`); thumb 24px branco com borda 2px turquesa, hit 44; foco = anel.

> ⚠ **Medido em 2026-08-26, junto com o switch, e a redação anterior reprovava:** cinza-300 dá **1,91:1** contra a página. Passa a cinza-500, **3,38:1** — o mesmo degrau e a mesma razão do `--seed-switch-off-bg`.
> ⭐ **E aqui a medição encontrou um limite que o switch não tinha: nenhum degrau atende os dois pares.** O trilho vazio precisa ficar longe do branco da página *e* longe do turquesa do preenchido, e o turquesa-600 mora no meio da escala — cinza-300 dá 2,40 contra o preenchido, cinza-500 dá 1,36. **A decisão não é escolher o menos pior; é ver o que cada par carrega.** O valor tem canal **textual** garantido pela linha seguinte desta mesma spec (*"valor corrente visível SEMPRE"*) e canal de **forma** no thumb de 24 px com borda. A divisão preenchido/vazio é o **terceiro** canal: fica **decorativa declarada, com o número escrito — 1,36:1 light / 2,59:1 dark** — que é o mesmo tratamento que o DS já dá a `card-border` e a `divider-color`. *Exigir 3:1 entre preenchido e vazio seria criar cláusula que o canon nunca teve, e cláusula nova é decisão do Rafael, não da sessão.* Rótulo do form-field + valor corrente visível SEMPRE (no campo pareado — nunca só em tooltip de hover, que não existe no toque).

### 12.4 Os 7 testes

1. Trilho ativo×inativo 3:1 medido; thumb 3:1 sobre ambos. 2. Posição + campo numérico (2 canais do valor). 3. Grayscale: trilho ativo mais ESCURO, não só matiz. 4. Par single × dual: nº de alças. 5. Um slider = um valor (ou uma faixa). 6. Valor legível sem interação (campo). 7. Thumb 24 hit 44; no toque o campo pareado é o caminho fino. ✅