# Detent Slider

Slider com paradas que agarram e a consequência em letra grande, com dígitos que rolam antes de confirmar.

- Nome no registry: `detent-slider`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/detent-slider
- Categorias: controles, slider, paradas, percentual, formulario, digitos

## Quando usar

- Use quando: Escolher quanto de algo, vendo o resultado antes de confirmar: fechar parte, dividir, repartir
- Evite quando: Simular um cenário com vários valores: sim-slider; ajustar sem consequência a mostrar: elastic-slider

## Instalar

```bash
npx shadcn@latest add @visant/detent-slider
```

## Usar

```tsx
<DetentSlider
  caption="Resultado ao fechar"
/>
```

## API

### DetentSlider

Slider com paradas: mostra a consequência exata em letra grande, antes de confirmar. O polegar agarra nas paradas com um pulso no ponto e uma vibração onde o aparelho deixa.

- `action?: string | ((value: number) => string)` — O botão de confirmar. Sem ele, a peça é só o controle.
- `caption?: string` — O nome do que o número grande mede, em uma linha acima dele.
- `confirmedAction?: string | ((value: number) => string) = "Confirmado"` — O que o botão diz por 2 segundos depois de confirmar, ou até o valor mudar.
- `defaultValue?: number = 50` — Onde a peça nasce quando é livre.
- `format?: (value: number) => string = "(v) => `${v}%`"` — A consequência do valor, em letra grande. Os dígitos rolam.
- `label?: string = "Valor"` — Nome do controle para leitor de tela.
- `magnet?: number = 3` — A que distância uma parada agarra.
- `onAction?: (value: number) => void`
- `onValueChange?: (value: number) => void`
- `stops?: number[] = [25, 50, 75, 100]` — As paradas que puxam o polegar.
- `value?: number` — Valor controlado, de 1 a 100.