import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './RangeSliderField.stories'

<Meta of={Stories} />

# RangeSliderField

A dual-thumb slider for selecting a min/max range.

## Usage

```tsx
import { RangeSliderField } from '@/components/onboarding'

<RangeSliderField
  id="price-range"
  label="Price Range"
  min={0}
  max={1000}
  step={10}
  value={[200, 800]}
  onChange={setRange}
  unit="$"
  unitPosition="prefix"
/>
```

## Props

- `value`: Tuple `[min, max]` for the selected range
- `unit`: Label like `"$"`, `"GB"`, `"users"`
- `unitPosition`: `'prefix'` ($100) or `'suffix'` (100 GB)
- `formatValue`: Custom formatter function
- `showMinMax`: Show min/max labels below slider (default: `true`)
- Use `{range}` in `description` to insert the formatted range

## Examples

### Price Range

<Canvas of={Stories.Default} />

### With Description

<Canvas of={Stories.WithDescription} />

### Storage

<Canvas of={Stories.Storage} />

### Team Size

<Canvas of={Stories.Users} />

### Custom Formatter

<Canvas of={Stories.CustomFormatter} />

### Disabled

<Canvas of={Stories.Disabled} />