The Slider lets users select a value along a continuous track by dragging a thumb. It supports multiple label positions, RTL layout, and the full range from 0% to 100%.
Loading demo: slider-real-world
npx sdaia-ui@latest add slider
import { RangeSlider } from "@/components/ui/range-slider"<RangeSlider defaultValue={[20, 80]} />Slider with bottom label.
Loading demo: slider-bottom-label
Slider with floating label.
Loading demo: slider-floating-label
Slider with no label.
Loading demo: slider-no-label
Props for the RangeSlider component.
Prop | Type | Default | Required |
|---|---|---|---|
value | number | — | optional |
defaultValue | number | 50 | optional |
onChange | (value: number) => void | — | optional |
label | 'inline' | 'bottom' | 'top-floating' | 'bottom-floating' | 'none' | — | optional |
dir | 'ltr' | 'rtl' | — | optional |
leadingIcon | boolean | — | optional |
trailingIcon | boolean | — | optional |
formatValue | (value: number) => string | — | optional |
disabled | boolean | false | optional |