The Slider component allows users to select a single value or range of values by dragging handles along a track, supporting both horizontal and vertical orientations.
Installation
npx shadcn@latest add @eo-n/slider
Install dependencies
Install the required packages:npm install @base-ui/react
Copy component code
Copy and paste the slider component code into your project at components/ui/slider.tsx.
Update imports
Update the import paths to match your project setup.
import { Slider } from "@/components/ui/slider";
export default function Example() {
return <Slider defaultValue={[50]} max={100} step={1} />;
}
Examples
Default
<Slider defaultValue={[50]} max={100} step={1} />
Controlled
import { useState } from "react";
function ControlledSlider() {
const [value, setValue] = useState([50]);
return (
<div className="space-y-4">
<Slider value={value} onValueChange={setValue} max={100} step={1} />
<p className="text-sm">Value: {value[0]}</p>
</div>
);
}
Disabled
<Slider defaultValue={[50]} disabled max={100} step={1} />
With Value Display
import { SliderValue } from "@/components/ui/slider";
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-sm font-medium">Volume</label>
<SliderValue />
</div>
<Slider defaultValue={[75]} max={100} step={1} />
</div>
With Custom Min/Max
<Slider defaultValue={[25]} min={0} max={50} step={5} />
With Custom Step
<Slider defaultValue={[5]} min={0} max={10} step={0.5} />
Range Slider
Use multiple values for a range slider.
import { useState } from "react";
function RangeSlider() {
const [value, setValue] = useState([25, 75]);
return (
<div className="space-y-4">
<Slider value={value} onValueChange={setValue} max={100} step={1} />
<p className="text-sm">
Range: {value[0]} - {value[1]}
</p>
</div>
);
}
Vertical Orientation
<Slider
orientation="vertical"
defaultValue={[50]}
max={100}
step={1}
className="h-64"
/>
Vertical Range
<Slider
orientation="vertical"
defaultValue={[25, 75]}
max={100}
step={1}
className="h-64"
/>
With Labels
import { SliderValue } from "@/components/ui/slider";
import { Label } from "@/components/ui/label";
function LabeledSlider() {
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<Label>Brightness</Label>
<SliderValue className="text-xs" />
</div>
<Slider defaultValue={[80]} max={100} step={1} />
<div className="flex justify-between text-xs text-muted-foreground">
<span>0%</span>
<span>100%</span>
</div>
</div>
);
}
API Reference
Extends all props from @base-ui/react Slider.Root component.
The controlled value(s) of the slider.
The default value(s) when uncontrolled.
Callback fired when the value changes.(value: number[]) => void
The step increment between values.
orientation
string
default:"horizontal"
The orientation of the slider.Options: horizontal | vertical
Whether the slider is disabled.
The name attribute for form submission.
Minimum number of steps between range thumbs.
Additional CSS classes to apply.
SliderValue
Displays the current slider value(s).
Additional CSS classes to apply.
Custom render function for the value.(value: number[]) => ReactNode
TypeScript
import { Slider as SliderPrimitive } from "@base-ui/react";
type SliderProps = React.ComponentProps<typeof SliderPrimitive.Root>;
type SliderValueProps = React.ComponentProps<typeof SliderPrimitive.Value>;
Styling Features
- Smooth transitions on interactions
- Focus ring on keyboard focus
- Hover ring on mouse hover
- Active ring while dragging
- Disabled state styling
- Primary color for track fill
- Shadow effects for depth
- Support for both orientations
Accessibility
- Fully keyboard accessible (Arrow keys to adjust, Home/End for min/max)
- Proper ARIA attributes
- Focus visible indicators
- Screen reader support with value announcements
- Touch-friendly for mobile devices
Related
