# Slider

One value or an ordered range with native keyboard controls on a shared rail.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Slider } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Slider label="Price range" name="price" defaultValue={[25, 75]} min={0} max={100} />
    </FloodRoot>
  );
}
```

## Design notes

- value/defaultValue contain one number or an ordered pair. onValueChange returns a new array. Values snap to min-based steps and thumbs cannot cross; Tab order stays stable. Supply thumbLabels to translate or explain each handle.
- Horizontal only. Direction follows the host, including RTL. Native range inputs retain keyboard behavior; pointer selection chooses the nearest handle. Names submit one or two entries; uncontrolled reset restores defaults.
- hideLabel preserves the accessible legend; showValue only controls the visible numeric readout. Read-only prevents edits while keeping focus. Use hint/message/error for meaning beyond color. Touch assistive technology needs device testing. Available in 0.2.5.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `legendSize · 0.2.10` | `"label" \| "section"` | `—` |
| `hideLabel · 0.2.3` | `boolean` | `—` |
| `hint` | `ReactNode` | `—` |
| `error` | `ReactNode` | `—` |
| `message` | `ReactNode` | `—` |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `label` | `string` | `Required` |
| `value` | `readonly number[]` | `—` |
| `defaultValue` | `readonly number[]` | `[50]` |
| `onValueChange` | `(value: number[]) => void` | `—` |
| `min` | `number` | `0` |
| `max` | `number` | `100` |
| `step` | `number` | `1` |
| `thumbLabels` | `readonly string[]` | `—` |
| `showValue` | `boolean` | `true` |
| `readOnly` | `boolean` | `false` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
| `Native HTML props` | `Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "legend" \| "children" \| "defaultValue" \| "onChange">` | `Forwarded` |