Slider
An interactive slider component for selecting values within a range.
Usage
Basic Slider
import { Slider } from "@prisma-docs/eclipse";
export function BasicSlider() {
return <Slider defaultValue={[50]} max={100} step={1} />;
}Live Example:
Controlled Slider
import { Slider } from "@prisma-docs/eclipse";
import { useState } from "react";
export function ControlledSlider() {
const [value, setValue] = useState([25]);
return (
<div>
<Slider value={value} onValueChange={setValue} max={100} step={1} />
<p>Value: {value[0]}</p>
</div>
);
}Range Slider
Use multiple values to create a range selector:
import { Slider } from "@prisma-docs/eclipse";
export function RangeSlider() {
return <Slider defaultValue={[25, 75]} max={100} step={1} />;
}Live Example:
Custom Step Size
import { Slider } from "@prisma-docs/eclipse";
export function SteppedSlider() {
return <Slider defaultValue={[50]} max={100} step={10} />;
}Live Example:
With Min and Max Values
import { Slider } from "@prisma-docs/eclipse";
export function CustomRangeSlider() {
return <Slider defaultValue={[0]} min={-50} max={50} step={5} />;
}Live Example:
Disabled State
import { Slider } from "@prisma-docs/eclipse";
export function DisabledSlider() {
return <Slider defaultValue={[50]} max={100} step={1} disabled />;
}Live Example:
Error State
Show an error state with the isErrored prop:
import { Slider } from "@prisma-docs/eclipse";
export function ErrorSlider() {
return <Slider defaultValue={[50]} max={100} step={1} isErrored />;
}Live Example:
With Labels
import { Slider } from "@prisma-docs/eclipse";
import { useState } from "react";
export function LabeledSlider() {
const [value, setValue] = useState([50]);
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<label htmlFor="volume">Volume</label>
<span className="text-sm text-muted-foreground">{value[0]}%</span>
</div>
<Slider
id="volume"
value={value}
onValueChange={setValue}
max={100}
step={1}
/>
</div>
);
}Slider Props
defaultValue- The initial value(s) when uncontrolled (number[], optional)value- The controlled value(s) (number[], optional)onValueChange- Callback when value changes ((value: number[]) => void, optional)min- Minimum value (number, default: 0)max- Maximum value (number, default: 100)step- Step increment (number, default: 1)disabled- Whether the slider is disabled (boolean, default: false)isErrored- Whether the slider is in an error state (boolean, default: false)orientation- Slider orientation:"horizontal"or"vertical"(default:"horizontal")className- Additional CSS classes (optional)- All standard Radix UI Slider props are supported
Features
- ✅ Single value and range selection
- ✅ Controlled and uncontrolled modes
- ✅ Customizable min, max, and step values
- ✅ Disabled state support
- ✅ Horizontal and vertical orientations
- ✅ Keyboard navigation (arrow keys)
- ✅ Touch and mouse support
- ✅ Eclipse design system styling
- ✅ Built on Radix UI primitives
- ✅ Accessible with ARIA attributes
Best Practices
- Use single values for simple selections (volume, brightness, etc.)
- Use range values for filtering (price ranges, date ranges, etc.)
- Provide clear labels to indicate what the slider controls
- Display the current value(s) near the slider for user feedback
- Choose appropriate step sizes based on the value range
- Use disabled state to indicate unavailable or locked settings
- Consider showing min/max labels for clarity
- Ensure sufficient contrast for the slider track and thumb
- Test touch interactions on mobile devices
Common Use Cases
Volume Control
<Slider defaultValue={[70]} max={100} step={1} aria-label="Volume" />Price Range Filter
<Slider defaultValue={[0, 1000]} min={0} max={5000} step={50} aria-label="Price range" />Opacity Adjustment
<Slider defaultValue={[100]} max={100} step={1} aria-label="Opacity" />Zoom Level
<Slider defaultValue={[100]} min={50} max={200} step={10} aria-label="Zoom level" />Rating Selection
<Slider defaultValue={[3]} min={1} max={5} step={1} aria-label="Rating" />Accessibility
- The slider is keyboard accessible using arrow keys:
- Right/Up Arrow: Increase value by step
- Left/Down Arrow: Decrease value by step
- Home: Set to minimum value
- End: Set to maximum value
- Page Up: Increase by larger increment
- Page Down: Decrease by larger increment
- Screen readers announce the current value and range
- Use
aria-labelor associated labels for screen reader context - Focus states are clearly visible
- Touch targets meet minimum size requirements
- Disabled sliders are not keyboard focusable
Keyboard Navigation
| Key | Action |
|---|---|
← / ↓ | Decrease value by step |
→ / ↑ | Increase value by step |
Home | Jump to minimum value |
End | Jump to maximum value |
Page Up | Increase by larger step |
Page Down | Decrease by larger step |
Integration Example
Complete example with state management and value display:
import { Slider } from "@prisma-docs/eclipse";
import { useState } from "react";
export function SettingsPanel() {
const [volume, setVolume] = useState([75]);
const [brightness, setBrightness] = useState([50]);
const [priceRange, setPriceRange] = useState([0, 1000]);
return (
<div className="space-y-6 w-full max-w-md">
<div className="space-y-2">
<div className="flex justify-between">
<label>Volume</label>
<span className="text-sm text-muted-foreground">{volume[0]}%</span>
</div>
<Slider value={volume} onValueChange={setVolume} max={100} />
</div>
<div className="space-y-2">
<div className="flex justify-between">
<label>Brightness</label>
<span className="text-sm text-muted-foreground">{brightness[0]}%</span>
</div>
<Slider value={brightness} onValueChange={setBrightness} max={100} />
</div>
<div className="space-y-2">
<div className="flex justify-between">
<label>Price Range</label>
<span className="text-sm text-muted-foreground">
${priceRange[0]} - ${priceRange[1]}
</span>
</div>
<Slider
value={priceRange}
onValueChange={setPriceRange}
min={0}
max={5000}
step={50}
/>
</div>
</div>
);
}