Skip to main content

​
Installation

npx shadcn@latest add slider

​
Usage

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

<Slider defaultValue={[33]} max={100} step={1} />

​
Component API

​
Slider

Range slider component built on Radix UI Slider. 
function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>)
Props:
  • defaultValue - Default value(s) as array (e.g., [50])
  • value - Controlled value(s) as array
  • onValueChange - Callback when value changes
  • min - Minimum value (default: 0)
  • max - Maximum value (default: 100)
  • step - Step increment (default: 1)
  • disabled - Disables the slider
  • orientation - Layout direction ("horizontal" | "vertical")

​
Implementation

The slider automatically creates thumbs based on the number of values: 
<SliderPrimitive.Root>
  <SliderPrimitive.Track>
    <SliderPrimitive.Range />
  </SliderPrimitive.Track>
  {Array.from({ length: values.length }, (_, index) => (
    <SliderPrimitive.Thumb key={index} />
  ))}
</SliderPrimitive.Root>

​
Examples

​
Basic Slider

Single value slider: 
<Slider defaultValue={[50]} max={100} step={1} />

​
Range Slider

Two thumbs for a range: 
<Slider defaultValue={[25, 75]} max={100} step={1} />

​
Multiple Thumbs

Multiple values: 
<Slider defaultValue={[20, 40, 60, 80]} max={100} step={1} />

​
With Label

Slider with value display: 
function SliderWithLabel() {
  const [value, setValue] = React.useState([50])

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Label>Volume</Label>
        <span className="text-sm text-muted-foreground">{value[0]}%</span>
      </div>
      <Slider value={value} onValueChange={setValue} max={100} step={1} />
    </div>
  )
}

​
Vertical Slider

Vertical orientation: 
<Slider
  defaultValue={[50]}
  max={100}
  step={1}
  orientation="vertical"
  className="h-[200px]"
/>

​
Controlled Slider

function ControlledSlider() {
  const [value, setValue] = React.useState([50])

  return (
    <div className="space-y-4">
      <Slider value={value} onValueChange={setValue} max={100} step={1} />
      <div className="flex gap-2">
        <Button onClick={() => setValue([0])}>Min</Button>
        <Button onClick={() => setValue([50])}>Middle</Button>
        <Button onClick={() => setValue([100])}>Max</Button>
      </div>
    </div>
  )
}

​
Disabled Slider

<Slider defaultValue={[50]} max={100} step={1} disabled />

​
Custom Step

Larger increments: 
<Slider defaultValue={[50]} max={100} step={10} />

​
Temperature Control

Practical example: 
function TemperatureControl() {
  const [temp, setTemp] = React.useState([20])

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Label>Temperature</Label>
        <span className="text-sm font-medium">{temp[0]}°C</span>
      </div>
      <Slider
        value={temp}
        onValueChange={setTemp}
        min={16}
        max={30}
        step={0.5}
      />
      <div className="flex justify-between text-xs text-muted-foreground">
        <span>16°C</span>
        <span>30°C</span>
      </div>
    </div>
  )
}

​
Volume Control

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

  return (
    <div className="flex items-center gap-4">
      <Volume2 className="h-4 w-4" />
      <Slider
        value={volume}
        onValueChange={setVolume}
        max={100}
        step={1}
        className="flex-1"
      />
      <span className="w-12 text-sm">{volume[0]}%</span>
    </div>
  )
}

​
Price Range

Filter by price range: 
function PriceRangeFilter() {
  const [range, setRange] = React.useState([0, 1000])

  return (
    <div className="space-y-4">
      <Label>Price Range</Label>
      <Slider
        value={range}
        onValueChange={setRange}
        min={0}
        max={1000}
        step={10}
      />
      <div className="flex justify-between text-sm text-muted-foreground">
        <span>${range[0]}</span>
        <span>${range[1]}</span>
      </div>
    </div>
  )
}

​
Accessibility

  • Full keyboard support (arrow keys, Home, End, Page Up/Down)
  • Proper ARIA attributes
  • Focus visible states
  • Screen reader announcements
  • Touch-friendly thumb size

​
API Reference

See the Radix UI Slider documentation for complete API reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us