# Slider

> A single-value range control built on a native `<input type="range">`, paired with a track that draws its own background rail and a live fill bar, plus an `<output>` for reporting the current value.

```ts
import { Slider } from "@sdxc/ui";
```

Renders the root `<div>`, stacking its children and resolving range, value, orientation
and thumb id into context. Nested parts scope orientation rules to its `data-slot`, so an
ancestor carrying `data-orientation` (a toolbar, a scroll viewport) leaves its layout alone.

## Examples

```tsx
<Slider aria-label={t("settings.volume")} min={0} max={100} defaultValue={40}>
	<Slider.Output />
	<Slider.Track>
		<Slider.Thumb />
	</Slider.Track>
</Slider>
```

```tsx
<Slider orientation="vertical" min={0} max={10} defaultValue={6}>
	<Slider.Track>
		<Slider.Thumb aria-label={t("equalizer.band", { hz: 250 })} />
	</Slider.Track>
</Slider>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `orientation?` | `"horizontal" \| "vertical"` | Layout axis. Defaults to DEFAULT_ORIENTATION. |
| `min?` | `number` | Lower bound of the range. Defaults to DEFAULT_MIN. |
| `max?` | `number` | Upper bound of the range. Defaults to DEFAULT_MAX. |
| `value?` | `number` | Current value, for a slider whose value the consumer tracks itself. |
| `defaultValue?` | `number` | Starting value, for a slider that never tracks its own value. |

Also accepts everything in `TagProps<"div">`.


### Slider.Track

Renders the visual track: a `position: relative` `<div>` that draws a rail and fill bar as pseudo-elements sized from context's resolved value, and overlays a nested Slider.Thumb so native drag spans its full length.

Also accepts everything in `TagProps<"div">`.


### Slider.Thumb

Renders the interactive thumb: a native `<input type="range">` reset to cover Slider.Track's full box so native drag and keyboard control span its whole length, rotating with `writing-mode` when vertical.

Also accepts everything in `Omit<TagProps<"input">, "type" | "role">`.


### Slider.Output

Renders a live readout: a native `<output>` associated by default with the nearest ancestor Slider's thumb via `htmlFor`, so assistive technology knows which control it reports on.

Also accepts everything in `TagProps<"output">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Orientation` | `"horizontal" \| "vertical"` | Axis the track's fill bar and thumb travel along: a full-width row, or a full-height column. |