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/slider"use client";
import { Volume2Icon, VolumeXIcon } from "lucide-react";
import { useState } from "react";
import { Slider, SliderValue } from "@/components/ui/component";
export default function Particle() {
const [value, setValue] = useState<number | readonly number[]>(25);
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<div className="w-full max-w-sm grid grid-cols-[auto_1fr_auto] items-center gap-x-2">
<div className="col-span-3 mb-2 flex items-center justify-between gap-1">
<label className="font-medium text-sm text-foreground">Volume</label>
<span className="text-sm text-foreground">{Array.isArray(value) ? value[0] : value}</span>
</div>
<VolumeXIcon aria-hidden="true" className="size-4 shrink-0 opacity-80 text-foreground" />
<Slider aria-label="Volume slider" onValueChange={setValue} value={value} />
<Volume2Icon aria-hidden="true" className="size-4 shrink-0 opacity-80 text-foreground" />
</div>
</div>
);
}