Capítulo 31 de 108

Slider

Core Idea

Input onde o usuário seleciona um valor (ou faixa de valores) dentro de um intervalo, arrastando um ou mais "thumbs" sobre uma trilha.

Key Concepts

  • defaultValue: array de números que define o valor inicial não controlado; um item = thumb único, dois ou mais itens = múltiplos thumbs/faixa.
  • value / onValueChange: par de props para uso controlado; onValueChange recebe o array atualizado.
  • min / max / step: limites e granularidade do valor.
  • orientation: "horizontal" (padrão) ou "vertical"; slider vertical precisa de altura explícita via className.
  • disabled: desabilita interação.
  • dir: "ltr" ou "rtl", controla direção do slider para suporte RTL.
  • Construído sobre Base UI Slider (@base-ui/react).

Code Examples

import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[33]} max={100} step={1} />
  • O que demonstra: uso básico não controlado com thumb único.
<Slider defaultValue={[25, 50]} max={100} step={5} className="mx-auto w-full max-w-xs" />
  • O que demonstra: range slider com dois thumbs (array de dois valores).
<Slider defaultValue={[10, 20, 70]} max={100} step={10} className="mx-auto w-full max-w-xs" />
  • O que demonstra: múltiplos thumbs (mais de dois) passando array com N valores.
const [value, setValue] = React.useState([0.3, 0.7])

<Slider
  value={value}
  onValueChange={(value) => setValue(value as number[])}
  min={0}
  max={1}
  step={0.1}
/>
  • O que demonstra: slider controlado, exibindo o valor atual em um <span> separado via value.join(", ").

Anti-patterns

  • Slider vertical sem altura definida: orientation="vertical" precisa de uma classe de altura (ex: h-40) no componente, senão o slider colapsa.

Key Takeaways

  1. Um array de tamanho N em defaultValue/value sempre gera N thumbs; não existe prop separada para "quantidade de thumbs".
  2. Para range, ordene os dois valores do array (start, end); o componente não reordena automaticamente.
  3. onValueChange retorna number[], exigindo cast (as number[]) em TypeScript estrito quando o estado é tipado como array literal.
  4. API completa de props herda de Base UI Slider; consultar a doc do Base UI para eventos e atributos avançados.

Connects To

  • Field/Label: usar Label associado via htmlFor/id para acessibilidade em sliders controlados (ver exemplo Controlled).
  • RTL Configuration: guia geral de RTL do shadcn/ui referenciado para configurar dir.
AnteriorSwitchPróximoCalendar