Slider
Controle deslizante que define um valor, ou um intervalo, arrastando ao longo de uma trilha. Ideal para quantidades aproximadas, em que ver a posição importa mais do que digitar um número exato.
Instalação
Configure o Camaleo uma vez (Instalação) e importe. O estilo carregado cuida da trilha e dos marcadores.
import { Slider } from "@camaleo/react";Anatomia
Um componente que renderiza o controle, a trilha, o preenchimento e um marcador por valor. Cada parte tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Intervalo
Passe um array e você ganha um marcador por valor; dê nome a cada um com getAriaLabel, já que "mínimo" e "máximo" não aparecem na tela.
Com o valor à mostra
Arraste. Mostre o valor ao lado do rótulo e passe o mesmo format e locale para o leitor de tela dizer "R$ 25.000" em vez de "25000".
Passos
O step encaixa nos valores que fazem sentido; o largeStep é o salto do Page Up e do Page Down.
Intervalo com distância mínima
O minStepsBetweenValues mantém os marcadores afastados, aqui pelo menos duas horas entre início e fim.
Solte para salvar
Salvar ao soltar
Arraste e solte. O onValueCommitted dispara uma vez no fim, então você salva ou busca uma vez, não a cada pixel.
Mostra clínicas até essa distância de Curitiba, PR.
Dentro de um Field
O FieldLabel dá nome ao marcador e o FieldDescription explica a escala, sem precisar de getAriaLabel.
Vertical
orientation="vertical" põe sliders lado a lado, como num equalizador; o getAriaValueText acrescenta a unidade, e o leitor de tela diz "+4 decibéis".
Assine o Pro para assistir acima de 720p.
Desativado, com o motivo
Um slider travado ainda mostra o valor atual; diga logo abaixo o que libera.
Em contexto
Sliders ficam em painéis e players. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Luiza Prado
1:12
3:32
Preço
Tela
Seu pedido nº 48213 sai amanhã.
Boas práticas
Quem escolhe um empréstimo precisa ver o valor, não adivinhar pela posição.
Onde fica R$ 25.000 nessa barra? Ninguém sabe.
Volume, brilho, zoom: o próprio efeito é o retorno.
Arrastar até 1987 entre 90 anos é chato; use um NumberField ou um campo de texto.
Props
(i) => ["Mínimo", "Máximo"][i]. Dispensável dentro de um Field com rótulo.(texto) => texto + " reais". Por padrão, o valor formatado.Passe um array em value ou defaultValue para um intervalo. Dentro de um Field, o rótulo e a descrição chegam aos marcadores, e disabled / name também podem vir de lá.
Styling hooks
Mude o visual sem fazer fork: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio slider.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- Cada marcador é um input range nativo com role="slider", aria-valuemin, aria-valuemax e aria-valuenow.
- Com format e locale, o aria-valuetext lê o valor formatado, como "R$ 1.200" ou "9 horas"; o getAriaValueText acrescenta o que o número sozinho não diz, como a unidade.
- Fora de um Field, dê nome a cada marcador com getAriaLabel.
- O controle tem pelo menos 24 px de altura em todos os estilos, o que atende ao tamanho de alvo do WCAG 2.2.