Slider

Choose a value along a continuous range. Use for volume, opacity, and other numeric settings.

Examples

Basic

With value

Volume40

Disabled

Overview

Slider lets users pick a number by dragging a thumb along a track. Compose control, track, indicator, and thumb under the root. Built on Base UI for keyboard and pointer interaction.

tsx

import {
  Slider,
  SliderControl,
  SliderTrack,
  SliderIndicator,
  SliderThumb,
} from "@standard-ui/react"

<Slider defaultValue={40}>
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
      <SliderThumb aria-label="Volume" />
    </SliderTrack>
  </SliderControl>
</Slider>

Usage

Structure

Nest SliderControl → SliderTrack → SliderIndicator and SliderThumb. The indicator fills from the start to the thumb.

tsx

<SliderControl>
  <SliderTrack>
    <SliderIndicator />
    <SliderThumb aria-label="Volume" />
  </SliderTrack>
</SliderControl>

Accessible name

Give the thumb an aria-label (or associate a visible label) so assistive tech can announce the control.

tsx

<SliderThumb aria-label="Opacity" />

API

Parts mirror Base UI Slider. Root accepts value and range props.

Part	Role
Slider	Root state and value.
SliderControl	Hit area and layout for the track.
SliderTrack	Background rail for the range.
SliderIndicator	Filled portion of the track.
SliderThumb	Draggable handle. Provide an accessible name.

Prop	Type	Default	Description
defaultValue	number \| number[]	—	Uncontrolled initial value.
value	number \| number[]	—	Controlled value.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Increment between values.
disabled	boolean	false	Disables the slider.

Guidelines

Do

Label the thumb with aria-label or a visible field label
Show the current value nearby when precision matters
Use a slider for continuous ranges, not discrete short lists

Don't

Don't use a slider for yes/no settings — prefer a switch
Don't leave the thumb unlabeled for screen readers
Don't force cursor-pointer — keep the platform default for controls