componentes / slider

Slider

Escolha um número ou um intervalo arrastando o botão ou usando o teclado.

Como usar

O valor é sempre um array, um número por botão: `[40]` para um valor, `[20, 80]` para um intervalo com a trilha preenchida entre os botões. O Slider não exibe o número escolhido, então mostre-o ao lado do controle. Dê nome com `aria-label` (obrigatório) e, no intervalo, a cada botão com `thumbLabels`.

preview

Volume: 40%

Preço: $200 – $800

Slider.tsx

import { Slider } from "vaiperui";
 
const [volume, setVolume] = useState([40]);
const [price, setPrice] = useState([200, 800]);
 
<p>Volume: {volume[0]}%</p>
<Slider aria-label="Volume" value={volume} onValueChange={setVolume} />
 
<Slider
  aria-label="Preço"
  thumbLabels={["Preço mínimo", "Preço máximo"]}
  value={price}
  onValueChange={setPrice}
  min={0}
  max={1000}
  step={10}
/>

Cores

preview

primary

success

warning

danger

cores.tsx

<Slider aria-label="primary" variantColor="primary" defaultValue={[50]} />
<Slider aria-label="success" variantColor="success" defaultValue={[50]} />
<Slider aria-label="warning" variantColor="warning" defaultValue={[50]} />
<Slider aria-label="danger" variantColor="danger" defaultValue={[50]} />

Tamanhos

preview

tamanhos.tsx

<Slider aria-label="sm" size="sm" defaultValue={[50]} />
<Slider aria-label="md" size="md" defaultValue={[50]} />
<Slider aria-label="lg" size="lg" defaultValue={[50]} />

Intervalo

Dois valores dão dois botões, com a trilha preenchida entre eles. `minStepsBetweenThumbs` mantém uma distância mínima.

preview

[20, 80]

minStepsBetweenThumbs 10

intervalo.tsx

<Slider aria-label="..." defaultValue={[20, 80]} />
<Slider aria-label="..." defaultValue={[30, 70]} minStepsBetweenThumbs={10} />

Passos

preview

step 25

passos.tsx

<Slider aria-label="..." step={25} defaultValue={[50]} />

Desabilitado

preview

desabilitado

estados.tsx

<Slider aria-label="..." defaultValue={[30]} disabled />

Cor personalizada

preview

Laranja

cor-personalizada.tsx

<Slider aria-label="..." customColor="#ff6600" defaultValue={[40]} />

Props

Prop	Valores	Padrão	Descrição
value / defaultValue	number[]	[min]	Valores, controlados ou iniciais: um número por botão
onValueChange	(value: number[]) => void	nenhum	Chamado enquanto o botão se move
onValueCommit	(value: number[]) => void	nenhum	Chamado quando o botão é solto ou uma tecla termina. Use para buscar dados só no final
min / max	number	0 / 100	Limites do intervalo
step	number	1	Passo entre os valores
minStepsBetweenThumbs	number	0	No intervalo, a distância mínima entre os botões, em passos
disabled	boolean	false	Bloqueia o uso
name	string	nenhum	Nome do campo no formulário; cada botão envia seu valor com ele
aria-label	string	obrigatório	Nome acessível. Com vários botões, um número é acrescentado
thumbLabels	string[]	nenhum	Nome acessível de cada botão, no lugar do aria-label numerado
variantColor	primary \| success \| warning \| danger	primary	Cor do estado marcado e do anel de foco
customColor	string \| { light, dark }	nenhum	Qualquer cor CSS (ou um par por tema). Substitui o variantColor
size	sm \| md \| lg	md	Tamanho do controle e do texto
animation	none \| smooth \| fast \| bounce	smooth	Transição ao alternar

Acessibilidade

Cada thumb é um `<div role="slider">` (não um input nativo) com `aria-valuemin`, `aria-valuemax`, `aria-valuenow` e `aria-orientation="horizontal"`.
`aria-label` é obrigatório. Com vários thumbs um número é acrescentado ("Preço 1", "Preço 2"), ou use `thumbLabels` para nomes próprios.
Cada thumb é uma parada de Tab (`tabIndex=0`); um thumb nunca cruza o vizinho, e `minStepsBetweenThumbs` mantém uma distância entre eles.
Com `disabled`, os thumbs recebem `aria-disabled="true"` e `tabIndex=-1`, e o controle ignora ponteiro e teclado.
Clicar na trilha foca o thumb mais próximo; `name` adiciona um input hidden por thumb para envio em formulários.

Teclado

Tecla	Ação
Arrow Right / Up	Aumentam um `step`.
Arrow Left / Down	Diminuem um `step`.
Page Up / Page Down	Mudam 10 steps.
Home / End	Vão para `min` / `max` (limitado pelos thumbs vizinhos).

Tenha em mente

`aria-valuetext` não é definido, então leitores de tela anunciam o número bruto; se precisar de unidade, ponha no `aria-label`.
Arrastar é só por ponteiro; usuários de teclado dependem das teclas acima. Não há suporte a `aria-labelledby`, apenas `aria-label`.