Ponteiro entra hover
A placa sobe à de hover em 180, o anel de accent a 70% em 260, a luz do cursor acende em 260 e o thumb aparece em 160.
Slider
O trilho em pílula: placa a 32% com o vidro desfocado atrás, stroke de 1,5 por dentro a branco 15%, e por baixo do conteúdo a faixa preenchida até o valor (branco 4% com stroke de 11%, cantos 100 à esquerda e 4 à direita). O Figma desenha um tamanho (480 × 112, o large a 2×) e um estado, sem alça: hover, arrasto, teclado, foco e desabilitado são da peça. A base é um input type="range" nativo, invisível por cima da casca: o ponteiro, o teclado e o foco são dele; o JS traduz o valor em --nash-runtime-value. Os nomes são os do mapa de vocabulário (docs/vocabulario-mapa.json, /componentes/63): .nash-slider, nash-slider-track, -range, -thumb, --nash-slider-*, nash:input, nash:change.
modo no ar: Chatúltimo gesto: nenhumvalor: 52passe o cursor · arraste · Tab e setas
Os estados
O quadro do Figma, congelado: não respondem ao ponteiro. Default como a referência desenhou; ao lado, o Hover e o Pressed que a peça define e o Figma ainda não desenha, e o desabilitado. Em código, data-state="default|hover|pressed" só existe aqui; na página o estado é o do input nativo (:active, :focus-visible, :disabled) e aria-disabled.
Default
Hover · pendente
Pressed · pendente
Desabilitado · pendente
Anatomia
O large, ampliado 1,1×. Numerado é o que o CSS desenha; cotado é o que o Figma mede.
480 × 112 (2× de 240 × 56) · raio 100 · padding 24 · gap 28
stroke 1,5 por dentro · faixa branco 4% + stroke 11%, cantos 100 / 4 · ícone 32 · valor 28/600
- O trilho.nash-slider-track: #0D0F12 a 32% com o vidro desfocado atrás (blur 28), a placa da família; hover a --nash-placa-hover, arrasto a --nash-placa-pressed. Raio pílula; altura 32 · 44 · 56 por data-size.
- O stroke, 1,5px por dentro.Branco 15 › 6 › 2 › 0 pela máscara da família. Por cima, o anel de accent 45 › 18 › 6 › 0: 70% sob o ponteiro, 1 no arrasto e no foco.
- A faixa.nash-slider-range: da borda esquerda até --nash-runtime-value × 100%, nunca menor que a altura; branco 4% com o stroke de 11% do Figma, cantos 100 à esquerda e 4 à direita. No arrasto, accent a 14% e o stroke a 45%.
- O thumb.nash-slider-thumb: a borda viva da faixa, um traço de 2px no accent a 3px da ponta. Só aparece com o ponteiro; cresce 10% no arrasto. O Figma não desenha alça.
- O conteúdo.nash-slider-icon (16 no medium e no large, 14 no small) e nash-slider-value (Archivo 600, 12 · 13 · 14, tabular). Opcionais; o JS escreve o valor no rótulo.
- A aura e a luz.No arrasto, a aura (um elemento que segue o contorno, 12 · 16 · 20px além) se abre em 420 e ao soltar é comida de dentro pra fora em 600. A luz do cursor: névoa de 160px no accent a 10% e o anel aceso de 100px no ponto mais perto do ponteiro.
- O input nativo.Por cima de tudo, a 0 de opacidade, com o thumb nativo a 1px pra o ponteiro mapear o valor de borda a borda. É ele que tem id, min, max, step, value, foco e teclado. Sem o JS, aparece com accent-color.
O que o Figma diz e o que a peça faz
Coluna a coluna: a medida do Figma, o que o kit e as telas tinham, e o que a peça adotou. O identificador sai do mapa de vocabulário; o Figma dá a base.
| Figma 327:727 | O kit e as telas | A peça |
|---|---|---|
| 480 × 112 · raio 100 · padding 24 · gap 28 | .nash-regua (trilho de 4px), .controle input[type=range] (nativo), .linha-range, input[type=range] à mão em cinco telas | o Figma é o large a 2×: 56 de altura, padding 12/16, gap 14. data-size="small|medium|large" = 32 · 44 · 56; a largura é da página |
| Placa rgba(13,15,18,.32) · stroke 1,5 branco 15% | accent-color do navegador | a placa da família (--nash-placa) com blur 28; o stroke 15 › 6 › 2 › 0 pela máscara |
| Faixa branco 4% + stroke 11%, cantos 100 / 4, até o valor | — | nash-slider-range, largura --nash-runtime-value × 100% (o JS escreve); no arrasto accent 14% e stroke accent 45% |
| Icon/Volume2 32 + valor 28/600 à esquerda | o valor num span ao lado | nash-slider-icon e nash-slider-value dentro do trilho, opcionais; o JS escreve o valor |
| Sem alça ("a bolinha existe oculta") | thumb redondo de 14 no accent | nash-slider-thumb, um traço de 2px na ponta da faixa, só com o ponteiro |
| Um estado | — | hover, arrasto (input:active), teclado (140ms), :focus-visible, aria-disabled / :disabled. Pendentes no Figma |
| Nomes: Volume Slider, active-track-fill, slider-content, slider-knob-indicator | .nash-regua, .controle, .faixa, .mk-faixa | .nash-slider, nash-slider-track, -range, -thumb, -icon, -value, --nash-slider-*, --nash-runtime-value, nash:input, nash:change. O identificador é do mapa (docs/vocabulario-mapa.json) |
| Escala de tempo | --nash-escala | --nash-slider-time-scale, com --nash-escala da família como fallback |
| Movimento reduzido | .nash-reduzido | [data-motion="reduced"] num ancestral, o nome do vocabulário |
O que se move
Toda curva é a de saída do kit. Sem laço: a peça não tem estado de repouso aceso. Cada tempo abaixo é o do CSS, na escala 1.
Pegar e soltar input:active
Pegar: a placa desce à pressed em 100; o thumb cresce 10% e ganha o halo em 160; a faixa toma o accent a 14% e o stroke dela acende a 45% em 180; o anel do trilho vai a 100% em 260; a aura se abre até o alcance em 420. A faixa segue o ponteiro sem transição. Soltar: placa em 160, thumb 160, faixa 180, anel 260, e a aura é comida de dentro pra fora em 600.
Pegar · 420ms
Soltar · 600ms
Teclado setas, Home, End
O foco visível do input desenha o outline de 2px no accent e acende o anel e o thumb. Cada passo anda --nash-runtime-value em 140 com a curva de saída: a faixa não salta. setValue anda no mesmo tempo.
Desabilitado aria-disabled, :disabled
A casca a 40% em 180; o input não recebe o ponteiro. O valor fica onde está.
Entrada nash-slider-enter
Opacidade 0 → 1 e 4px de baixo em 420ms, backwards; irmãos entram escalonados por --nash-runtime-index × 60ms (o mountAll escreve pela ordem). As variantes congeladas não entram.
Como usar
Dois arquivos do kit. O CSS desenha tudo; o JS completa o trilho, a faixa, o thumb, a aura e a luz, escreve o valor e a luz do cursor, e reemite input e change como nash:input e nash:change. O input nativo é o mesmo elemento de sempre: id, min, max, step, value e os ouvintes da página continuam nele.
<link rel="stylesheet" href="css/nash-slider.css" />
<script src="js/nash-slider.js"></script>
<span class="nash-slider" data-mode="chat">
<input type="range" id="volume" min="0" max="100" step="1" value="52" aria-label="Volume" />
<i class="nash-slider-icon"><svg viewBox="0 0 24 24">…</svg></i> // opcional
<span class="nash-slider-value">52</span> // opcional; o JS escreve
</span>
const s = NashSlider.mount('#s', { onInput, onChange, format: (v) => v + '%' })
s.setValue(80) // anda em 140ms; dispara input e change no input nativo
s.getValue() // o número do input
NashSlider.mountAll() // todo .nash-slider com input dentro; --nash-runtime-index pela ordem
Decisões
O que fugiu do Figma ou do kit, e por quê.
- O nome é do mapa de vocabulário.Os nomes do Figma (Volume Slider, active-track-fill, slider-content, slider-knob-indicator) dão a base, não o identificador. A peça é .nash-slider; partes nash-slider-track, -range, -thumb (mapa, /componentes/63), mais -icon e -value pelo mesmo padrão; token --nash-slider-*; o que o JS escreve, --nash-runtime-value.
- O input nativo fica.Acessibilidade, teclado, foco e o mapeamento do ponteiro vêm de graça; a peça desenha por cima e traduz o valor. As telas que já liam o input pelo id continuam lendo. Sem o JS, o input aparece.
- O Figma é o large a 2×.480 × 112 é 240 × 56 dobrado: padding 24 → 12, gap 28 → 14, ícone 32 → 16, valor 28 → 14. O medium (44) é o padrão, como nas irmãs; o small (32) é o dos painéis.
- O thumb é um traço, não uma bolinha.O Figma anota que a alça existe oculta; a peça a mostra só com o ponteiro, como a borda viva da faixa, pra o trilho em repouso ser o do desenho.
- O valor fica à esquerda, não segue o thumb.É onde o Figma o desenha. O JS escreve o texto de nash-slider-value a cada input; a página formata com format.
- A faixa segue o ponteiro sem transição.No arrasto --nash-runtime-value transiciona em 0; pelo teclado e por setValue, em 140 com a curva de saída. Um valor que anima durante o arrasto ficaria atrás do dedo.
- Sem laço.O arrasto não é estado de repouso; nada respira. A aura existe só entre pegar e soltar, e vai embora comida de dentro pra fora (a técnica do Button).