Slider

Escolhe um número ou uma faixa arrastando um cursor.

O Slider escolhe um valor numérico dentro de um intervalo, como o prazo total de uma rota ou um ajuste percentual. Para digitar o valor exato, use NumberField; os dois funcionam bem juntos.

import { Slider } from "@rastreio-x/ui";

Padrão

Informe minValue, maxValue e um Label. Slider.Output mostra o valor atual.

Prazo Total (dias corridos)30

Faixa

Com um valor em lista, o slider tem dois cursores. Cada Slider.Thumb precisa de index e de aria-label próprio.

Faixa base (dias)28 a 35 dias

Passo e formato

step define o incremento e formatOptions formata o valor com Intl.NumberFormat.

Ajuste Global do Prazo2.000%

Controlado

Com value e onChange, o estado mostra o efeito da escolha em texto.

Prazo Total (dias corridos)32

O Cliente vê a entrega prevista em 32 dias corridos.

Desabilitado

Prazo total: 32 dias corridos

A faixa só muda em Rotas, com permissão de administrador.

Anatomia

Slider
├── Slider.Fill
├── Slider.Marks
├── Slider.Output
├── Slider.Thumb
└── Slider.Track

Slider.Output: o valor atual, em texto.
Slider.Track: o trilho.
Slider.Fill: o trecho preenchido.
Slider.Thumb: o cursor arrastável.
Slider.Marks: marcas opcionais ao longo do trilho.

Propriedades

Raiz (Slider):

Slider
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`children`	`ChildrenOrFunction<SliderRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<SliderRenderProps>`	`'react-aria-Slider'`	Classes CSS aplicadas ao elemento.
`defaultValue`	`number \| number[]`	-	Valor inicial: um número, ou uma lista com um valor por polegar.
`formatOptions`	`Intl.NumberFormatOptions`	-	Formato de exibição do valor (`Intl.NumberFormatOptions`).
`id`	`string`	-	Identificador único do elemento.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`maxValue`	`number`	`100`	Valor máximo.
`minValue`	`number`	`0`	Valor mínimo.
`onChange`	`((value: number \| number[]) => void)`	-	Chamada quando o valor ou a seleção muda.
`onChangeEnd`	`((value: number \| number[]) => void)`	-	Chamada quando a pessoa termina de arrastar.
`orientation`	`Orientation`	`'horizontal'`	Orientação: `horizontal` (padrão) ou `vertical`.
`render`	`DOMRenderFunction<'div', SliderRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`step`	`number`	`1`	Passo entre valores consecutivos.
`style`	`StyleOrFunction<SliderRenderProps>`	-	Estilos em linha aplicados ao elemento.
`value`	`number \| number[]`	-	Valor atual: um número, ou uma lista com um valor por polegar (controlado).

Cursor (Slider.Thumb):

Slider.Thumb
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`autoFocus`	`boolean`	-	Foca o elemento ao renderizar.
`children`	`ChildrenOrFunction<SliderThumbRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<SliderThumbRenderProps>`	`'react-aria-SliderThumb'`	Classes CSS aplicadas ao elemento.
`form`	`string`	-	Id do `<form>` ao qual o elemento está associado.
`id`	`string`	-	Identificador único do elemento.
`index`	`number`	`0`	Índice do polegar no controle.
`inputRef`	`RefObject<HTMLInputElement \| null>`	-	Referência ao elemento `input`.
`isDisabled`	`boolean`	-	Desabilita o componente: sem foco, clique nem envio.
`isInvalid`	`boolean`	-	Marca o valor como inválido e mostra o estado de erro.
`isRequired`	`boolean`	-	Exige um valor antes de enviar o formulário.
`name`	`string`	-	Nome do campo enviado com o formulário.
`orientation`	`Orientation`	`'horizontal'`	Orientação do componente: `horizontal` ou `vertical`.
`render`	`DOMRenderFunction<'div', SliderThumbRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<SliderThumbRenderProps>`	-	Estilos em linha aplicados ao elemento.

Animações

CSS
indicativo

O cursor reage ao hover e ao arrastar com transições curtas (motion-reduce do tema as desliga). O preenchimento acompanha o cursor sem atraso, durante o arrasto.

Acessibilidade

Cada cursor é um input type="range" (papel slider) com aria-valuemin, aria-valuemax e aria-valuenow.
Setas ajustam por step; Page Up e Page Down saltam mais; Home e End vão aos limites.
Em faixa, dê um aria-label a cada cursor ("Mínimo de dias", "Máximo de dias").
Mostre o valor em texto (Slider.Output): o cursor sozinho não diz o número.

Boas práticas

Faça

Rótulo com unidade e valor visível: Prazo Total (dias corridos), 32.

Evite

Um slider sem valor visível, para intervalos grandes ou que exigem número exato.

Para precisão, ofereça também um NumberField.
Defina step coerente com a unidade (1 dia, 10%).
Evite sliders para intervalos muito grandes; prefira um campo numérico.
Mostre o efeito do valor em linguagem do domínio.

Relacionados

NumberField para digitar o valor exato.
Select para escolher entre poucas opções.
Switch para ligar ou desligar o efeito.