# Slosh Slider

Um slider em que o preenchimento tem peso: arrastou rápido, a tinta passa do polegar, balança e assenta.

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

## Quando usar

- Use quando: Slider de volume ou intensidade em que o preenchimento tem peso e balança ao soltar
- Evite quando: Formulário neutro: elastic-slider; simulação com projeção, sim-slider; console de áudio, vintage-slider

## Instalar

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

## Usar

```tsx
<SloshSlider
  step={5}
  value={60}
  label="Água hoje"
/>
```

## API

### SloshSlider

- `label: string` — Rótulo visível; também nomeia o polegar pra leitor de tela.
- `defaultValue?: number = 50`
- `format?: (value: number) => string` — Formata o número exibido ao lado do rótulo.
- `max?: number = 100`
- `min?: number = 0`
- `onValueChange?: (value: number) => void`
- `step?: number = 1`
- `tilt?: number = 14` — Inclinação máxima da borda da tinta, em px. 0 deixa a borda reta.
- `value?: number` — Valor controlado. Sem ele, o slider guarda o próprio estado.
- `viscosity?: number = 9` — Amortecimento da tinta: baixo balança mais, alto assenta logo.