Getting Started
Templates
Components
0 |
| Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment for keyboard/drag |
onChange | (value: number) => void | undefined | Callback when value changes |
onDragStart | () => void | undefined | Callback when drag starts |
onDragEnd | (value: number) => void | undefined | Callback when drag ends |
disabled | boolean | false | Whether the slider is disabled |
className | string | undefined | Additional CSS classes |
aria-label | string | "Progress" | Accessible label for the slider |
prefers-reduced-motion preference| Key | Action |
|---|---|
ArrowRight / ArrowUp | Increase by step |
ArrowLeft / ArrowDown | Decrease by step |
PageUp | Increase by step × 10 |
PageDown | Decrease by step × 10 |
Home | Set to minimum |
End | Set to maximum |
import { DraggableProgressBar } from "@/components/ui/draggable-progress-bar"
export default function Example() {
return <DraggableProgressBar />
}import { useState } from "react"
import { DraggableProgressBar } from "@/components/ui/draggable-progress-bar"
export default function Example() {
const [value, setValue] = useState(65)
return (
<DraggableProgressBar
value={value}
onChange={setValue}
/>
)
}<DraggableProgressBar
value={50}
min={0}
max={200}
step={5}
onChange={(value) => console.log(value)}
/><DraggableProgressBar
value={50}
onDragStart={() => console.log("Started dragging")}
onDragEnd={(value) => console.log("Ended at:", value)}
onChange={(value) => console.log("Current:", value)}
/><DraggableProgressBar
value={30}
disabled
/><DraggableProgressBar
value={75}
aria-label="Volume control"
onChange={(value) => setVolume(value)}
/>