Slider

Sliders let people make selections from a range of values.

Props

React props
NameTypeRequiredDefaultDescription
classNamestring | Partial<Record<"slider" | "activeTrack" | "handle" | "inactiveTrack" | "valueIndicator" | "dot", string>> | ClassNameComponent<SliderInterface>NoRoot classes (string), static element classes (object), or state-aware element classes (function).
valuenumberNoControlled value. Providing it makes the slider controlled for its lifetime.
defaultValuenumberNo0Initial value for uncontrolled usage.
onChange(value: number) => voidNoCalled once for each accepted value transition (drag, click, or keyboard).
disabledbooleanNofalsePrevents interaction and form submission.
namestringNoName of the underlying hidden form control.
valueFormatter(value: number) => string | numberNoFormats the value shown in the drag indicator and `aria-valuetext`.
stepnumberNoSnapping 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[]NoLabeled positions along the track. Snapped to when `step` is not given; shown for reference alongside a numeric `step` otherwise.