Skip to main content
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

​
value
number[]
The controlled value(s) of the slider.
​
defaultValue
number[]
The default value(s) for uncontrolled usage.
​
onValueChange
(value: number[]) => void
Callback fired when the value changes.
​
min
number
default:"0"
The minimum value of the slider.
​
max
number
default:"100"
The maximum value of the slider.
​
step
number
default:"1"
The step increment for value changes.
​
disabled
boolean
Whether the slider is disabled.
​
variant
'single' | 'range'
default:"'single'"
The variant of the slider. Use ‘range’ for two thumbs.
​
label
string | [string, string]
Label(s) to display on the thumb(s). Use array for range variant.
​
thumbSize
'small' | 'large'
default:"'large'"
The size of the slider thumb.
​
className
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.