# Slider (/docs/slider)
## API Reference [#api-reference]
## Basic [#basic]
{`
import {
Slider,
SliderLabel,
SliderValue,
SliderThumb,
} from "moduix";
export function SliderDemo() {
return (
Volume{([formattedValue]) => \`\${formattedValue}%\`}
);
}
`}
{(context) => }
{(context) => }
## Anatomy [#anatomy]
`Slider` renders the Base UI control, track, and indicator internally, so consumers only compose the
meaningful content: label, value, and thumbs. Add one `SliderThumb` for each value in the slider.
```text
Slider
├─ SliderLabel
├─ SliderValue
└─ internal control
└─ internal track
├─ internal indicator
└─ SliderThumb[index]
```
```tsx
Volume{([formattedValue]) => `${formattedValue}%`}
```
| Part | Role |
| ------------- | ----------------------------------------------------------------------------------------------------------- |
| `Slider` | Root state machine. Controls value, range values, steps, orientation, disabled state, and form integration. |
| `SliderLabel` | Visible label connected to the slider inputs. Use it when the control has a readable label on screen. |
| `SliderValue` | Optional formatted value display. It receives formatted values and raw numeric values as render arguments. |
| `SliderThumb` | Interactive handle. Render one thumb for a single value and multiple indexed thumbs for a range. |
The control, track, and indicator are service-like slots for this component. They stay internal by
default and can be styled through `classNames.control`, `classNames.track`, and
`classNames.indicator` when token-level customization is not enough.
## Composition [#composition]
Use `Slider` for behavior props such as `value`, `defaultValue`, `onValueChange`,
`onValueCommitted`, `min`, `max`, `step`, `largeStep`, `minStepsBetweenValues`, `orientation`,
`thumbAlignment`, `thumbCollisionBehavior`, `name`, and `form`.
Use `SliderThumb` for the accessible name of each handle. A visible `SliderLabel` labels the group,
but multi-thumb sliders still need distinct `aria-label` values on each thumb.
Style the root with `className`, visible parts with their own `className`, and internally rendered
track structure with `classNames`:
```tsx
Temperature{([formattedValue]) => `${formattedValue}%`}
```
## Examples [#examples]
### Range [#range]
Pass an array value and render one `SliderThumb` for each value to let users select a range.
{`
import {
Slider,
SliderLabel,
SliderValue,
SliderThumb,
} from "moduix";
import { useState } from "react";
export function RangeSliderDemo() {
const [value, setValue] = useState([20, 70] as readonly number[]);
return (
Price range{([minValue, maxValue]) => \`\${minValue} - \${maxValue}\`}
);
}
`}
### Steps and Constraints [#steps-and-constraints]
Use `step`, `largeStep`, and `minStepsBetweenValues` to make range selection snap to meaningful
increments. `thumbCollisionBehavior` controls what happens when thumbs meet.
{`
import {
Slider,
SliderLabel,
SliderValue,
SliderThumb,
} from "moduix";
import { useState } from "react";
const priceFormatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0,
});
export function SteppedRangeSliderDemo() {
const [value, setValue] = useState([250, 750] as readonly number[]);
return (
Budget
{(_, [minValue, maxValue]) =>
\`\${priceFormatter.format(minValue)} - \${priceFormatter.format(maxValue)}\`
}
);
}
`}
### Controlled [#controlled]
Control the value from React state when the slider needs to synchronize with another control.
{`
import {
Slider,
SliderLabel,
SliderValue,
SliderThumb,
} from "moduix";
import { useState } from "react";
import styles from "./slider.module.css";
export function ControlledSliderDemo() {
const [value, setValue] = useState(24);
return (