Components
Loading preview...
An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.
npx shadcn@latest add https://21st.dev/r/coss.com/sliderimport { Slider } from "@/components/ui/component";
const bands = [
{ label: "60 Hz", value: 2 },
{ label: "250 Hz", value: 1 },
{ label: "1k", value: -1 },
{ label: "4k", value: -3 },
{ label: "16k", value: 2 },
];
export default function Particle() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<div className="flex flex-col items-center gap-4">
<div className="flex h-48 justify-center gap-8">
{bands.map((band) => (
<div key={band.label} className="flex flex-col items-center gap-2">
<Slider
aria-label={band.label}
defaultValue={band.value}
max={5}
min={-5}
orientation="vertical"
/>
</div>
))}
</div>
<div className="flex justify-center gap-8">
{bands.map((band) => (
<span key={band.label} className="text-muted-foreground text-xs w-8 text-center">{band.label}</span>
))}
</div>
</div>
</div>
);
}