Slider

Visão geral

Slider envolve @radix-ui/react-slider. Thumb único por default; passe defaultValue={[low, high]} (ou value) para um slider de range. Respeita step, min, max e orientation="vertical".

Use o Slider quando a posição aproximada é mais útil que a precisão exata - volume, brilho, filtros de preço. Para valores exatos use um Input numérico. Para escolhas discretas, prefira RadioGroup ou Select. Sempre mostre o valor atual ao lado do slider; sliders silenciosos confundem os usuários.

Preview

'use client';import { Slider } from '@gremorie/rx-forms';export function SliderPreview() {  return (    <div className="max-w-sm">      <Slider defaultValue={[40]} max={100} step={1} />    </div>  );}

Anatomia

Slider                  Root; wraps Radix Slider.Root
├─ Track                track background
│  └─ Range             filled portion of the track
└─ Thumb                one draggable handle per value

Instalação

Uso

import { Slider } from "@gremorie/rx-forms";

export function Example() {
  return <Slider defaultValue={[40]} max={100} step={1} />;
}

API

<Slider>

Encaminha para SliderPrimitive.Root. Renderiza SliderPrimitive.Track, SliderPrimitive.Range e um SliderPrimitive.Thumb por valor.

Composição

1. <Slider> é um primitivo folha que renderiza track + range + um thumb por valor.
2. Pareie com um <Label> (associado via aria-labelledby se não existir alvo de htmlFor) ou defina aria-label diretamente na raiz.
3. Mostre o valor atual ao lado do slider - os usuários esperam uma leitura numérica para confirmar onde estão.
4. Para uso vinculado a formulário, envolva com <FormField> + <FormControl> e converta o valor de array de volta para um número (ou array) para o schema do seu formulário.

Variações

Thumb único

O padrão canônico. Mostre o valor ao lado.

function Volume() {
  const [value, setValue] = React.useState([40]);
  return (
    <div className="grid gap-2">
      <div className="flex items-center justify-between">
        <Label>Volume</Label>
        <span className="text-sm tabular-nums text-muted-foreground">
          {value[0]}%
        </span>
      </div>
      <Slider
        value={value}
        onValueChange={setValue}
        max={100}
        step={1}
        aria-label="Volume"
      />
    </div>
  );
}

Slider de range

Passe dois valores para defaultValue (ou value). Sempre defina thumbAriaLabel como um array para que cada thumb tenha um nome único.

'use client';import { Slider } from '@gremorie/rx-forms';export function SliderRangePreview() {  return (    <div className="w-full max-w-sm">      <Slider        defaultValue={[25, 75]}        min={0}        max={100}        thumbAriaLabel={['Minimum price', 'Maximum price']}      />    </div>  );}

Slider com steps

Use um step maior para snapar em valores discretos como quantidade, rating ou tamanho de fonte.

'use client';import { Slider } from '@gremorie/rx-forms';export function SliderStepsPreview() {  return (    <div className="w-full max-w-sm">      <Slider        defaultValue={[50]}        min={0}        max={100}        step={10}        thumbAriaLabel="Quantity"      />    </div>  );}

Disabled

disabled remove os thumbs da ordem de tab e cai a opacidade para 50%.

'use client';import { Slider } from '@gremorie/rx-forms';export function SliderDisabledPreview() {  return (    <div className="w-full max-w-sm">      <Slider        defaultValue={[40]}        min={0}        max={100}        disabled        thumbAriaLabel="Volume"      />    </div>  );}

Orientação vertical

Útil para controles de mídia, color pickers ou qualquer UI onde o espaço horizontal é precioso.

<div className="h-44">
  <Slider defaultValue={[60]} orientation="vertical" aria-label="Brightness" />
</div>

Acessibilidade

• ARIA: cada thumb é um role="slider" com aria-valuemin, aria-valuemax, aria-valuenow e aria-orientation definidos pelo Radix.
• Teclado:
  • ArrowLeft / ArrowDown decrementam por step.
  • ArrowRight / ArrowUp incrementam por step.
  • PageDown / PageUp mudam por incrementos maiores (tipicamente 10x step).
  • Home pula para min; End pula para max.
• Multi-thumb: cada thumb é focável independentemente; o Radix impede os thumbs de se cruzarem.
• thumbAriaLabel: defina-o para qualquer slider de range / multi-thumb para que cada thumb anuncie um nome específico. Sem ele, os leitores de tela caem para o aria-label da raiz, e depois para um genérico "Slider thumb 1".
• Disabled: data-disabled remove os thumbs da ordem de tab e cai a opacidade para 50%.
• Sempre mostre o valor: exiba visualmente o valor atual para que todos os usuários (não só os de leitor de tela) recebam o mesmo feedback.

Relacionados

• Input - use para valores numéricos exatos
• Form - conecte o Slider no react-hook-form
• Label - o companheiro canônico