Slider

import { Slider, type SliderVariant } from "@/components/ui/slider";

import { Slider } from "@/components/ui/slider";

export function Example() {
  return <Slider label="Opacity" defaultValue={20} unit="%" />;
}

Slider                            (single component — pass everything as props)
├── variant="default | ticks"
├── label={<ReactNode>}           (text shown above the track / inside the ticks track)
├── caption={<ReactNode>}         (helper text below the track)
├── value | defaultValue          (number for single, number[] for range)
├── onValueChange={(v) => …}      (controlled handler)
├── min / max / step              (numeric bounds and increment)
├── unit="%" | "dB" | …           (suffix appended to the displayed value)
├── formatValue={(v) => …}        (full control over the rendered value)
├── showValue={boolean}           (toggle the live value, default true)
├── prefixIcon / suffixIcon       (icons rendered either side of the track, default variant)
├── ticks={number}                (number of evenly-spaced tick marks, ticks variant)
├── orientation="horizontal | vertical"
└── disabled                      (read-only + muted styling)