Forms

Slider

Selects numeric values or ranges along a bounded track.

idle

Usage

import { Slider } from "@mizen-labs/ui";

Examples

Audio settings

Adjust playback volume with the keyboard or pointer.

Control sizes

Ranges and orientation

Permissions and validation

Ticks and thumb values

Optional ticks follow step. Values can appear inside the thumb or above the track.

Recommendations

Guidance	Practice
Do	Show the current value and units. Give each thumb a name when selecting a range.
Do	Use getAriaLabel to name each thumb in a range.

Usage boundaries

Guidance	Boundary
Scope	Use Number Field when exact entry matters more than relative adjustment. Sliders need meaningful bounds.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`value`	`number \| readonly number[]`	`—`	Controlled value of the slider.
`defaultValue`	`number \| readonly number[]`	`—`	Initial uncontrolled value of the slider.
`min`	`number`	`0`	Minimum allowed value.
`max`	`number`	`100`	Maximum allowed value.
`step`	`number`	`1`	Stepping interval for value changes.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Axis orientation of the slider track.
`disabled`	`boolean`	`false`	Prevents interaction and applies disabled styling.
`invalid`	`boolean`	`false`	Indicates validation failure.
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Visual size variant affecting track thickness and thumb dimensions.
`onValueChange`	`(value: number \| readonly number[], eventDetails: SliderPrimitive.Root.ChangeEventDetails) => void`	`—`	Callback fired when the slider value changes.
`onValueCommitted`	`(value: number \| readonly number[], eventDetails: SliderPrimitive.Root.CommitEventDetails) => void`	`—`	Callback fired when a value change is committed.
`getAriaLabel`	`(index: number) => string`	`—`	Function deriving accessible names for individual thumbs by index.
`Slider`	`SliderProps`	`"div"`	Root slider container coordinating values, context, and thumb anatomy.
`SliderControl`	`SliderControlProps`	`"div"`	Interactive layout wrapper managing track positioning and touch targets.
`SliderTrack`	`SliderTrackProps`	`"div"`	Geometric track along which the thumbs and indicator move.
`SliderIndicator`	`SliderIndicatorProps`	`"div"`	Visual fill bar representing selected progress or range span.
`SliderThumb`	`SliderThumbProps`	`"div"`	Movable handle supporting pointer and keyboard value adjustment.
`SliderLabel`	`SliderLabelProps`	`"label"`	Accessible label bound to the slider control.
`SliderValue`	`SliderValueProps`	`"output"`	Formatted text representation of the current slider value.
`SliderPrimitive`	`typeof BaseSlider`	`—`	Low-level Base UI slider primitive namespace.
`ticks`	`boolean`	`false`	Show dots at step intervals. Native step snaps pointer and keyboard changes.
`thumbValue`	`boolean`	`false`	Show each formatted value inside its thumb. Uses format and locale.
`thumbAlignment`	`"edge" \| "center" \| "edge-client-only"`	`"edge"`	Keep thumbs inside track edges by default.
`children`	`ReactNode`	`—`	Content appears above the default control. Explicit SliderControl children replace default anatomy.
`locale`	`Intl.LocalesArgument`	`"en-US"`	Stable formatting locale for server and client hydration. Pass an explicit locale for translated values.