# Liquid Slider

A glass that fills as you drag, with a surface that behaves like water.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/liquid-slider
```

## Usage

```tsx
import { LiquidSlider } from '@/components/fetaui/liquid-slider'

export function Example() {
  return <LiquidSlider defaultValue={1250} max={2000} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| value | number |  |
| defaultValue | number | 1250 |
| onValueChange | (value) => void |  |
| min, max, step | number | 0, 2000, 50 |
| label | string | Water today |
| unit | string | ml |
| lowAt | 0 to 1 | .2 |
| lowText, fullText | string | Drink up, Goal reached |
| color | CSS color | ink |
| disabled | boolean | false |
| animated | boolean | true |
| className | string |  |

## When to use

- For one friendly value with a goal, like water or a savings target.

## When not to use

- For dense settings: use Slider.

## Accessibility

- The glass is a vertical slider with a text value that includes the unit and the goal.
- Low and Full are announced.
- Focus rings the glass in ink.

## Motion

- The level rises on a 220 and 26 spring, and the digits roll.
- The surface is 34 small springs that rest when the energy is gone, so no loop runs when idle.
- Dragging bulges the water up to 14 px under the pointer, and bubbles rise.
- Release and keys slosh: the surface tilts with pointer speed and throws three drops.
- Full stamps a badge from .6 on a 500 and 22 spring.
- With reduced motion, the surface is flat, the level steps, and no bubbles rise.