Componentes
12. Slider
seed-componentes.md v1.43 · §12seção 14 de 9812-slider-estavel-validado-pelo-rafael-em-2026-08.md · MD5 d1d78e8cTítulo completo no canon: 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á acard-bordere adivider-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#
- 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. ✅