Slider

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/slider

UsageCopy Anchor Link

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

<Slider defaultValue={50} getAriaLabel={() => "Volume"} />;

Every thumb needs an accessible name. Use a FieldLabel (below) or getAriaLabel. An aria-label on Slider doesn't name the thumbs. getAriaLabel is a function, so pass it from a Client Component.

Label and valueCopy Anchor Link

Put a FieldLabel and SliderValue inside the slider, and wrap it in a Field.

RangeCopy Anchor Link

Pass an array to defaultValue or value to get one thumb per value. Name each thumb with getAriaLabel, which receives the thumb's index.

VerticalCopy Anchor Link

API referenceCopy Anchor Link

Also accepts every Base UI Slider.Root prop, like value, defaultValue, onValueChange, step, orientation, and disabled. Columbus renders the control, track, indicator, and thumbs for you.

Thumbs stay inside the track at both ends (Base UI's thumbAlignment="edge").

SliderValue shows the current value. It accepts every Base UI Slider.Value prop, including a children function to format the value.