Slider

Set min, max, and step. The machine manages pointer dragging, keyboard steps, and form state.

import { Slider } from '@manti-ui/react';

export default function SliderBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*6)]">
      <Slider
        label="Spice level"
        variant="primary"
        defaultValue={40}
        min={0}
        max={100}
        step={1}
        showValue
      />
    </div>
  );
}

Range and marks

Pass two values for a range. Add marks for labeled positions.

Price range25 – 75

Portion50

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional label rendered above the track.
`variant`	`MantiVariant`	`'primary'`	Variant of the filled track and thumb.
`value`	`number \| number[]`	—	Controlled value. Pass an array for a range slider.
`defaultValue`	`number \| number[]`	—	Initial value for uncontrolled usage.
`onValueChange`	`(value: number[]) => void`	—	Called whenever the value changes.
`onValueChangeEnd`	`(value: number[]) => void`	—	Called when a drag or keyboard interaction settles.
`min / max`	`number`	—	Lower and upper bounds of the range.
`step`	`number`	—	Increment between selectable values.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`marks`	`number[]`	—	Tick marks rendered along the track.
`showValue`	`boolean`	—	Show the current value next to the label.
`disabled / readOnly / invalid`	`boolean`	—	Field state flags.
`name`	`string`	—	Form field name.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="slider"][data-part="root"]`	The component container.
`header`	`[data-scope="slider"][data-part="header"]`	Wraps the label and value text.
`label`	`[data-scope="slider"][data-part="label"]`	The optional label.
`value-text`	`[data-scope="slider"][data-part="value-text"]`	The current value output.
`control`	`[data-scope="slider"][data-part="control"]`	The interactive track region.
`track`	`[data-scope="slider"][data-part="track"]`	The full-length rail.
`range`	`[data-scope="slider"][data-part="range"]`	The filled portion up to the thumb.
`thumb`	`[data-scope="slider"][data-part="thumb"]`	A draggable handle (one per value).
`marker-group`	`[data-scope="slider"][data-part="marker-group"]`	Wraps the tick marks.
`marker`	`[data-scope="slider"][data-part="marker"]`	A single tick mark.

Tokens

Token	Controls
`--manti-slider-thumb-size`	thumb size
`--manti-slider-track-size`	track size
`--manti-slider-length`	length
`--manti-slider-marker-size`	marker size

Last updated 13 September 2026