Pharos
Navegar componentes
← Componentes

Slider

MiscExemplo
Controle arrastável para selecionar um valor numérico ou intervalo dentro de limites definidos. Suporta valor único e seleção de intervalo, marcas de tick, formatação customizada de valor e orientação vertical. Use quando usuários precisam explorar um intervalo contínuo, como volume, preço ou porcentagem.
Importação
import {Slider} from '@pharos-ds/core/Slider';

Exemplos

Área interativa

orientation
valueDisplay
isDisabled
Volume
Código
import {Slider} from '@pharos-ds/core/Slider';

<Slider
  orientation="horizontal"
  valueDisplay="tooltip"
  isDisabled={false}
 />

Boas práticas

  • Faça: Sempre forneça um rótulo, mesmo oculto visualmente, para que o slider seja acessível a leitores de tela.
  • Faça: Formate valores com unidades significativas como "$50" ou "75%" em vez de números brutos.
  • Evite: Use para entrada numérica precisa; combine com um text input ou use NumberInput.
  • Evite: Defina um step tão grande que apenas algumas posições sejam possíveis; use SegmentedControl ou radio buttons.
  • Evite: Envolva um slider desabilitado em Tooltip para explicar por que está desabilitado; controles desabilitados absorvem os eventos de hover que o wrapper precisa. Use a prop disabledMessage.

Props

PropTipoPadrãoDescrição
label *string—Texto do rótulo (sempre renderizado para acessibilidade).
value *number | [number, number]—Valor atual: um `number` para modo thumb único ou `[number, number]` para modo intervalo.
onChange(value: number) => void | (value: [number, number]) => void—Callback disparado na mudança de valor durante o arraste.
onChangeEnd(value: number) => void | (value: [number, number]) => void—Callback disparado quando o arraste termina.
minnumber0Valor mínimo.
maxnumber100Valor máximo.
stepnumber1Incremento de step.
orientation'horizontal' | 'vertical''horizontal'Orientação do slider.
formatValue(value: number) => string—Função customizada de formatação de valor usada para exibição e `aria-valuetext`.
valueDisplay'tooltip' | 'text' | 'none''tooltip'Como o valor atual é exibido.
marksArray<{ value: number; label?: string }>—Marcas de tick em posições especificadas com rótulos opcionais.
minStepsBetweenThumbsnumber0Número mínimo de steps entre thumbs no modo intervalo; impede que thumbs se sobreponham.
isDisabledbooleanfalseSe o slider está desabilitado.
htmlNamestring—Atributo HTML name para envio de formulários. Renderiza inputs hidden com o valor atual (duas entradas no modo intervalo).
disabledMessagestring—Explica por que o slider está desabilitado. Com isDisabled, mostra tooltip em hover/foco por teclado e mantém o thumb focável via aria-disabled (mudanças de valor permanecem bloqueadas). Use isso em vez de envolver um Slider desabilitado em Tooltip. Controles desabilitados absorvem os eventos de hover que um Tooltip externo precisa.
isOptionalbooleanfalseSe o campo é opcional.
isRequiredbooleanfalseSe o campo é obrigatório.
isLabelHiddenbooleanfalseSe o rótulo deve ser ocultado visualmente.
descriptionstring—Texto de description renderizado abaixo do rótulo.
status{type: 'warning' | 'error' | 'success', message?: string}—Objeto indicador de status (`{ type, message }`) para feedback de validação.
labelTooltipstring—Texto de tooltip para um ícone de info exibido ao lado do rótulo.
widthSizeValue—Largura do campo (número = pixels, string usada como está, ex. "100%"). Dimensiona o campo inteiro (rótulo, controle e status) para mantê-los alinhados.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/Slider
Slider · Pharos