# Elastic Slider

Slider que estica feito elástico quando você puxa além do limite e volta com a velocidade da soltura.

- Nome no registry: `elastic-slider`
- Tipo: componente
- Dependências npm: motion, react
- Demo: https://ui.visantlabs.com/c/elastic-slider
- Categorias: controles, slider, range, fisica, mola, formulario, teclado

## Quando usar

- Use quando: Slider de formulário ou configuração que estica além do limite e volta com mola
- Evite quando: Valor com peso visual: slosh-slider; projeção com premissa, sim-slider; editor, scrub-input

## Instalar

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

## Usar

```tsx
<ElasticSlider
  value={64}
  label="Volume"
/>
```

## API

### ElasticSlider

- `label: string` — Rótulo visível; também dá nome ao polegar pra leitor de tela.
- `className?: string`
- `defaultValue?: number` — Valor inicial quando não controlado.
- `disabled?: boolean`
- `endIcon?: any` — Ícone da ponta direita.
- `format?: (value: number) => string` — Formata o número mostrado e falado.
- `max?: number = 100`
- `min?: number = 0`
- `onValueChange?: (value: number) => void` — Dispara a cada mudança, inclusive durante o arrasto.
- `onValueCommit?: (value: number) => void` — Dispara uma vez: ao soltar o arrasto ou a cada tecla.
- `showValue?: boolean = true` — Mostra o valor ao lado do rótulo.
- `startIcon?: any` — Ícone da ponta esquerda; é empurrado junto quando o trilho estica pra lá.
- `step?: number = 1`
- `stretch?: number = 26` — Quanto o trilho pode esticar além da ponta, em px.
- `value?: number` — Valor controlado. Sem ele, o slider guarda o próprio estado.