# RangeSelector

Two bounded handles define an interval without crossing or hiding their values.

- Family: Interaction, imported from `mizu-ui` or `mizu-ui/interaction`
- Docs: https://mizu.user64bit.world/components/range-selector
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/interaction/RangeSelector.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { RangeSelector } from "mizu-ui";

export function Example() {
  const [value, setValue] = useState<[number, number]>([20, 70]);
  return (
    <RangeSelector
      label="Visible window"
      value={value}
      onValueChange={setValue}
      min={0}
      max={120}
      format={(v) => `${v}s`}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/range-selector
```

## Props

- `value / onValueChange`: `[number, number] / function`. Controlled start and end.
- `min / max / step`: `number` (default `0 / 100 / 1`). Full interval and native step.
- `format`: `(value: number) => string`. Visible and announced units.

## Accessibility

Two separately labelled native ranges share a fieldset legend. Start is bounded by end, end by start, and each input spans only the stretch of the shared scale it may move along, so both thumbs and the selected window line up. Native keyboard and touch behavior.

## Motion

Direct native input.