Slider

The Slider component allows users to select a value or range of values by dragging a thumb along a track. It supports both single value and range selection.

Basic usage

import { Slider } from '@raystack/apsara';

function App() {
  return <Slider defaultValue={[50]} min={0} max={100} />;
}

Props

number[]

The controlled value(s) of the slider.

number[]

The default value(s) for uncontrolled usage.

(value: number[]) => void

Callback fired when the value changes.

number

default:"0"

The minimum value of the slider.

number

default:"100"

The maximum value of the slider.

number

default:"1"

The step increment for value changes.

boolean

Whether the slider is disabled.

'single' | 'range'

default:"'single'"

The variant of the slider. Use ‘range’ for two thumbs.

string | [string, string]

Label(s) to display on the thumb(s). Use array for range variant.

'small' | 'large'

default:"'large'"

The size of the slider thumb.

string

Additional CSS classes to apply to the slider.

Single value slider

function SingleSlider() {
  const [value, setValue] = useState([50]);

  return (
    <div>
      <Slider value={value} onValueChange={setValue} min={0} max={100} />
      <p>Value: {value[0]}</p>
    </div>
  );
}

Range slider

function RangeSlider() {
  const [range, setRange] = useState([25, 75]);

  return (
    <div>
      <Slider
        variant="range"
        value={range}
        onValueChange={setRange}
        min={0}
        max={100}
      />
      <p>Range: {range[0]} - {range[1]}</p>
    </div>
  );
}

With labels

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

<Slider
  variant="range"
  defaultValue={[20, 80]}
  label={['Min', 'Max']}
  min={0}
  max={100}
/>

With step

<Slider defaultValue={[50]} min={0} max={100} step={10} />

Thumb sizes

<Slider thumbSize="small" defaultValue={[50]} />
<Slider thumbSize="large" defaultValue={[50]} />

Disabled state

<Slider defaultValue={[50]} disabled />

Price range example

function PriceRangeSlider() {
  const [priceRange, setPriceRange] = useState([100, 500]);

  return (
    <div>
      <h4>Price Range</h4>
      <Slider
        variant="range"
        value={priceRange}
        onValueChange={setPriceRange}
        min={0}
        max={1000}
        step={10}
        label={['Min', 'Max']}
      />
      <p>${priceRange[0]} - ${priceRange[1]}</p>
    </div>
  );
}

Volume control example

function VolumeControl() {
  const [volume, setVolume] = useState([70]);

  return (
    <div>
      <label>Volume: {volume[0]}%</label>
      <Slider
        value={volume}
        onValueChange={setVolume}
        min={0}
        max={100}
        label="Vol"
        thumbSize="small"
      />
    </div>
  );
}

Custom min/max range

<Slider defaultValue={[2024]} min={2000} max={2030} step={1} />

With value display

function SliderWithDisplay() {
  const [value, setValue] = useState([42]);

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span>0</span>
        <strong>{value[0]}</strong>
        <span>100</span>
      </div>
      <Slider value={value} onValueChange={setValue} min={0} max={100} />
    </div>
  );
}

Accessibility

Built on Base UI Slider primitive with full accessibility support.
Proper ARIA attributes including aria-label are automatically applied.
Supports keyboard navigation with arrow keys to adjust values.
The thumb has proper focus states and can be navigated via Tab key.
Labels are used as aria-label for each thumb to identify them to screen readers.
The slider uses edge alignment for accurate value representation.

Get Started

Guides

Layout Components

Navigation Components

Data Display

Form Components

Feedback Components

Overlay Components

Utility Components

Basic usage

Props

Single value slider

Range slider

With labels

With step

Thumb sizes

Disabled state

Price range example

Volume control example

Custom min/max range

With value display

Accessibility

​Basic usage

​Props

​Single value slider

​Range slider

​With labels

​With step

​Thumb sizes

​Disabled state

​Price range example

​Volume control example

​Custom min/max range

​With value display

​Accessibility

Basic usage

Props

Single value slider

Range slider

With labels

With step

Thumb sizes

Disabled state

Price range example

Volume control example

Custom min/max range

With value display

Accessibility