Slider

A control that allows the user to select a value from a range.

Usage

Used to select a single value or a range of values from a predefined range.

import { Slider } from "@elemnts-ui/react";

<Slider.Root defaultValue={[30]}>
  <Slider.Label>Volume</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0} />
  </Slider.Control>
</Slider.Root>;

Range

Use the defaultValue or value prop with an array of values to enable range selection and render multiple thumbs.

Min and Max

Specify the minimum and maximum values for the slider using the min and max props.

API Reference

Slider

The root component for the slider.

Prop	Type	Default
aria-label	`string[]`	-
aria-labelledby	`string[]`	-
asChild	`boolean`	`false`
defaultValue	`number[]`	-
disabled	`boolean`	-
form	`string`	-
getAriaValueText	`(details: ValueTextDetails) => string`	-
id	`string`	-
ids	`Partial<{ root: string; thumb: (index: number) => string; hiddenInput: (index: number) => string; control: string; track: string; range: string; label: string; valueText: string; marker: (index: number) => string }>`	-
invalid	`boolean`	-
largeStep	`number`	`10 * step`
max	`number`	`100`
min	`number`	`0`
minStepsBetweenThumbs	`number`	`0`
name	`string`	-
onFocusChange	`(details: FocusChangeDetails) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
onValueChangeEnd	`(details: ValueChangeDetails) => void`	-
orientation	`"horizontal" \| "vertical"`	`"horizontal"`
origin	`"center" \| "start" \| "end"`	`"start"`
readOnly	`boolean`	-
step	`number`	`1`
thumbAlignment	`"center" \| "contain"`	`"contain"`
thumbCollisionBehavior	`"none" \| "push" \| "swap"`	`"none"`
thumbSize	`{ width: number; height: number }`	-
value	`number[]`	-

SliderRootProvider

Provides a slider API returned by useSlider to its descendants.

Prop	Type	Default
value	`UseSliderReturn`	required
asChild	`boolean`	`false`

SliderLabel

The label for the slider.

Prop	Type	Default
asChild	`boolean`	`false`

SliderControl

Wraps the slider track and thumbs.

Prop	Type	Default
asChild	`boolean`	`false`

SliderHiddenInput

The hidden input used for form submission.

Prop	Type	Default
asChild	`boolean`	`false`

SliderStepGroup

Groups slider steps.

Prop	Type	Default
asChild	`boolean`	`false`

SliderStep

Represents an individual slider step.

Prop	Type	Default
value	`number`	required
asChild	`boolean`	`false`

SliderMarkerGroup

Groups slider markers.

Prop	Type	Default
asChild	`boolean`	`false`

SliderMarker

Represents an individual slider marker.

Prop	Type	Default
value	`number`	required
asChild	`boolean`	`false`

SliderTrack

The track along which the slider thumbs move.

Prop	Type	Default
asChild	`boolean`	`false`

SliderRange

Displays the selected range of the slider.

Prop	Type	Default
asChild	`boolean`	`false`

SliderThumb

The draggable handle used to change a slider value.

Prop	Type	Default
index	`number`	required
asChild	`boolean`	`false`
name	`string`	-

SliderValueText

Displays the formatted value of the slider.

Prop	Type	Default
asChild	`boolean`	`false`