Slider

A slider component built on top of Radix UI Slider.

Installation

npx shadcn@latest add slider

Usage

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

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

Examples

Default

import { cn } from "@/lib/utils"
import { Slider } from "@/components/ui/slider"
type SliderProps = React.ComponentProps<typeof Slider>
export default function SliderDemo({ className, ...props }: SliderProps) {
return (
  <Slider
    defaultValue={[50]}
    max={100}
    step={1}
    className={cn("w-[60%]", className)}
    {...props}
  />
)
}

Range

You can use the slider as a range slider by providing an array with two values.

<Slider defaultValue={[25, 75]} max={100} step={1} />

Disabled

Use the disabled prop to disable the slider.

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

Orientation

Use the orientation prop to change the orientation of the slider.

<Slider defaultValue={[50]} max={100} step={1} orientation="vertical" />

Props

Slider

Extends React.ComponentProps<typeof SliderPrimitive.Root>

| Prop | Type | Default | Description | | :-- | :-- | :-- | :-- | | defaultValue | number[] | [0] | The default value of the slider. | | value | number[] | undefined | The controlled value of the slider. | | min | number | 0 | The minimum value of the slider. | | max | number | 100 | The maximum value of the slider. | | step | number | 1 | The step value of the slider. | | orientation | "horizontal" \| "vertical" | "horizontal" | The orientation of the slider. | | disabled | boolean | false | Whether the slider is disabled. | | onValueChange | (value: number[]) => void | undefined | A callback function called when the value changes. | | onValueCommit | (value: number[]) => void | undefined | A callback function called when the value changes and the user stops dragging. |