Components
Loading preview...
A draggable control that uses rubber banding for out-of-bounds feedback.
npx shadcn@latest add https://21st.dev/r/builduilabs/slider"use client";
import { useState } from "react";
import { Slider } from "@/components/ui/slider";
function SliderDemo() {
const [volume, setVolume] = useState(50);
return (
<div className="p-8">
<h1 className="mb-4 text-xl text-white">Volume: {volume}</h1>
<Slider value={volume} onChange={setVolume} />
</div>
);
}
export { SliderDemo };