Slider

Sliders let people make selections from a range of values.

Props

React props
NameTypeRequiredDefaultDescription
classNamestring | Partial<Record<"dot" | "slider" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator", string>> | ClassNameComponent<SliderInterface>No—Root classes (string), static element classes (object), or state-aware element classes (function).
valuenumberNo—Controlled value. Providing it makes the slider controlled for its lifetime.
defaultValuenumberNo0Initial value for uncontrolled usage.
onChange(value: number) => voidNo—Called once for each accepted value transition (drag, click, or keyboard).
disabledbooleanNofalsePrevents interaction and form submission.
namestringNo—Name of the underlying hidden form control.
valueFormatter(value: number) => string | numberNo—Formats the value shown in the drag indicator and `aria-valuetext`.
stepnumberNo—Snapping increment. Defaults to 10 when neither `step` nor `marks` is given; explicit `marks` without `step` snaps to those marks instead.
minnumberNo0Minimum value. Use `-Infinity` for an open lower end.
maxnumberNo100Maximum value. Use `Infinity` for an open upper end.
marksSliderMark[]No—Labeled positions along the track. Snapped to when `step` is not given; shown for reference alongside a numeric `step` otherwise.