# Slider

Escolha de valor numa faixa: desconto, prazo, tolerancia.

**Só vale quando o número exato não importa.** Se importa, o `NumberField` diz
mais e não pede pontaria: arrastar um pino até 37 e trabalho, digitar 37 não.

```tsx
<Slider defaultValue={25} max={50} label="Desconto" showValue />
```

O `label` é o nome que o leitor de tela lê no pino, e não só o texto acima
dele: um pino sem rótulo visível é que precisa de `thumbLabel`.

`format` escreve o número do `showValue` e o que o leitor de tela anuncia: o
nome de um formatador da casa, ou uma função sua para a unidade que só esta tela
tem.

```tsx
<Slider defaultValue={30} max={90} label="Prazo" showValue format={(dias) => `${dias} dias`} />
```

Com dois valores, vira faixa de dois pinos, e cada pino precisa do próprio
nome, senao o leitor de tela anuncia dois controles iguais:

```tsx
<Slider
  defaultValue={[20, 60]}
  label="Faixa de valor"
  showValue
  thumbLabel={['Valor minimo', 'Valor maximo']}
/>
```

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Slider` - anda por gesto e responde às ações do leitor de tela; um valor só, e `label` obrigatório. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Slider } from '@rivocode/ui'
```

## Exemplos

### Com rótulo

```tsx
import { Slider } from '@rivocode/ui'

export function WithLabel() {
  return (
    <div className="w-72">
      <Slider defaultValue={25} max={50} label="Desconto" showValue thumbLabel="Desconto" />
    </div>
  )
}
```

### Faixa

```tsx
import { Slider } from '@rivocode/ui'

export function Range() {
  return (
    <div className="w-72">
        <Slider
        defaultValue={[20, 60]}
        label="Faixa de valor"
        showValue
        thumbLabel={['Valor minimo', 'Valor maximo']}
      />
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `classNames` | `Partial<Record<"control" \| "indicator" \| "label" \| "thumb" \| "track" \| "value", string>>` |  | 0.5.0 | Classe por parte: `label`, `value`, `control`, `track`, `indicator`, `thumb`. |
| `defaultValue` | `number \| readonly number[]` |  | 0.4.0 | The uncontrolled value of the slider when it's initially rendered. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the slider should ignore user interaction. |
| `form` | `string` |  | 0.4.0 | Identifies the form that owns the slider inputs. |
| `format` | `Format` |  | 0.4.0 | Como o numero e escrito: nome de formatador da casa ou funcao propria, o mesmo vocabulario do eixo do grafico. |
| `label` | `ReactNode` |  | 0.4.0 | Texto acima do controle, e o nome que o leitor de tela le no pino. |
| `largeStep` | `number` |  | 0.4.0 | The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. |
| `locale` | `LocalesArgument` |  | 0.4.0 | The locale used by `Intl.NumberFormat` when formatting the value. |
| `max` | `number` |  | 0.4.0 | The maximum allowed value of the slider. |
| `min` | `number` |  | 0.4.0 | The minimum allowed value of the slider. |
| `minStepsBetweenValues` | `number` |  | 0.4.0 | The minimum steps between values in a range slider. |
| `name` | `string` |  | 0.4.0 | Identifies the field when a form is submitted. |
| `numberFormat` | `NumberFormatOptions` |  | 0.5.0 | As opcoes do `Intl.NumberFormat`, para quem precisa delas. |
| `onValueChange` | `((value: number \| readonly number[], eventDetails: SliderRootChangeEventDetails) => void)` |  | 0.4.0 | Callback function that is fired when the slider's value changed. |
| `onValueCommitted` | `((value: number \| readonly number[], eventDetails: SliderRootCommitEventDetails) => void)` |  | 0.4.0 | Callback function that is fired when a value change is committed. |
| `orientation` | `Orientation` |  | 0.4.0 | The component orientation. |
| `render` | `ComponentRenderFn<HTMLProps, SliderRootState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `showValue` | `boolean` |  | 0.4.0 | Mostra o valor ao lado do rotulo. |
| `step` | `number` |  | 0.4.0 | The granularity with which the slider can step through values. |
| `thumbAlignment` | `"center" \| "edge" \| "edge-client-only"` |  | 0.4.0 | How the thumb(s) are aligned relative to `Slider.Control` when the value is at `min` or `max`: - `center`: The center of the thumb is aligned with the control edge - `edge`: The thumb is inset within the control such that its edge is aligned with the control edge - `edge-client-only`: Same as `edge` but renders after React hydration on the client, reducing bundle size in return |
| `thumbCollisionBehavior` | `"none" \| "push" \| "swap"` |  | 0.4.0 | Controls how thumbs behave when they collide during pointer interactions. |
| `thumbLabel` | `string \| string[]` |  | 0.4.0 | O que o leitor de tela chama o pino, no lugar do `label`. |
| `value` | `number \| readonly number[]` |  | 0.4.0 | The value of the slider. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Autocomplete](/componentes/autocomplete.md)
- [Calendar](/componentes/calendar.md)
- [Checkbox](/componentes/checkbox.md)
- [CheckboxGroup](/componentes/checkbox-group.md)
- [ColorPicker](/componentes/color-picker.md)
- [Combobox](/componentes/combobox.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)