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 { useState } from "react";
import { Slider } from "@/components/ui/component";
const labels = ["Awful", "Poor", "Okay", "Good", "Amazing"];
export default function Particle() {
const [value, setValue] = useState<number | readonly number[]>(3);
const currentValue = Array.isArray(value) ? value[0] : value;
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">Rate your experience</label>
<span className="text-sm">{labels[(currentValue as number) - 1]}</span>
</div>
<span aria-hidden="true" className="text-2xl">😡</span>
<Slider
aria-label="Rate your experience"
max={5}
min={1}
onValueChange={setValue}
value={value}
/>
<span aria-hidden="true" className="text-2xl">😍</span>
</div>
</div>
);
}