Range Slider lets users select a value range using two draggable handles, with configurable labels and RTL support.
Loading demo: range-slider-real-world
npx sdaia-ui@latest add range-slider
import { RangeSlider } from "@/components/ui/range-slider"<RangeSlider defaultValue={[20, 80]} />Range slider with default variant
Loading demo: range-slider-default
Range slider with label bottom floating.
Loading demo: range-slider-bottom-floating
Range slider with the value label positioned below the track.
Loading demo: range-slider-bottom-label
Props for the RangeSlider component.
Prop | Type | Default | Required |
|---|---|---|---|
value | [number, number] | - | optional |
defaultValue | [number, number] | [20, 80] | optional |
onChange | (value: RangeSliderValue) => void | - | optional |
min | number | 0 | optional |
max | number | 100 | optional |
step | number | 1 | optional |
label | 'inline' | 'bottom' | 'top-floating' | 'bottom-floating' | 'none' | 'inline' | optional |
direction | 'ltr' | 'rtl' | 'ltr' | optional |
leadingIcon | boolean | false | optional |
trailingIcon | boolean | false | optional |
disabled | boolean | false | optional |
formatValue | (value: number) => string | - | optional |