Preview

Volume Control

Volume: 50%

Installation

<> import.ts
import { Slider } from "@/components/ui/slider"

Code

<> component.tsx
import { Slider } from "@/components/ui/slider"

<Slider
  value={[value]}
  onChange={setValue}
  min={0}
  max={100}
/>

API Reference

Slider

An input where the user selects a value from within a given range.

<> import.ts
import { Slider, SliderPresets } from "@/components/ui/slider"

Props

PropTypeDefaultDescription
value
number—Current value (controlled)
defaultValue
number50Default value (uncontrolled)
min
number0Minimum value
max
number100Maximum value
step
number1Step increment
onChange
(value: number) => void—Change handler for the slider
className
string""Additional CSS classes
size
"sm" | "md" | "lg""md"Size of the slider
disabled
booleanfalseWhether the slider is disabled

Examples

Example 1
<> example.tsx
// Basic slider
<Slider />
Example 2
<> example.tsx
// Controlled slider
<Slider 
  value={sliderValue}
  onChange={setSliderValue}
  min={0}
  max={100}
/>
Example 3
<> example.tsx
// Different sizes
<Slider size="sm" />
<Slider size="md" />
<Slider size="lg" />
Example 4
<> example.tsx
// Custom range and step
<Slider 
  min={10}
  max={200}
  step={10}
  defaultValue={50}
/>
Example 5
<> example.tsx
// Disabled slider
<Slider disabled={true} />

Presets

small

Small size slider with default range

medium

Medium size slider with default range

large

Large size slider with default range