Slider

A slider to select a value or range

A slider component built with Ark UI. Use the convenience API with defaultValue (array for single or range) or the compound API for custom layout and multiple thumbs.

Volume

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return (
    <Slider defaultValue={[50]} min={0} max={100} label="Volume" />
  );
}

View Code

Installation

bash

liminal add slider

Usage

Pass defaultValue as an array (e.g. [50] for single value, [20, 80] for range), plus min, max, and optional step and label.

<Slider defaultValue={[30]} min={0} max={100} />

View Code

Examples

With label

Brightness

<Slider defaultValue={[60]} min={0} max={100} label="Brightness" />

View Code

Range slider (compound API)

For a range (two thumbs), use the compound API with two SliderThumb components (index 0 and 1).

tsx

import {
  SliderRoot,
  SliderLabel,
  SliderControl,
  SliderTrack,
  SliderRange,
  SliderThumb,
} from "@/components/ui/slider";

export default function Example() {
  return (
    <SliderRoot defaultValue={[25, 75]} min={0} max={100}>
      <SliderLabel>Range</SliderLabel>
      <SliderControl>
        <SliderTrack>
          <SliderRange />
        </SliderTrack>
        <SliderThumb index={0} />
        <SliderThumb index={1} />
      </SliderControl>
    </SliderRoot>
  );
}

API

Prop	Type	Default	Description
defaultValue	number[]	-	Initial value(s), e.g. [50] or [20, 80] for range.
value	number[]	-	Controlled value(s).
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Step increment.
label	React.ReactNode	-	Accessible label (convenience API).
onValueChange	(details: { value: number[] }) => void	-	Callback when value changes.