Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt

Use this file to discover all available pages before exploring further.

Slider

A slider allows the user to select a value or range from a continuous or discrete range.

Import

import * as Slider from '@base-ui/react/slider';

Slider.Root

Groups all parts of the slider.

Props

State

  • activeThumbIndex: number - The index of the active thumb
  • disabled: boolean - Whether the component should ignore user interaction
  • dragging: boolean - Whether the thumb is currently being dragged
  • max: number - The maximum value
  • min: number - The minimum value
  • minStepsBetweenValues: number - The minimum steps between values in a range slider
  • orientation: ‘horizontal’ | ‘vertical’ - The component orientation
  • step: number - The step increment of the slider
  • values: readonly number[] - The raw number value of the slider

Slider.Control

The track along which the thumb(s) can be moved.

Slider.Thumb

The draggable handle that represents the slider value.

Props

Slider.Output

Displays the current value of the slider.

Slider.Indicator

Visual indicator for the selected range.

Build docs developers (and LLMs) love