Range Slider
Range Slider lets users select a value range using two draggable handles, with configurable labels and RTL support.
Loading preview…
1
'use client';2
3
import { RangeSlider } from 'sdaia-ui';4
import { useState } from 'react';5
import type { RangeSliderValue } from 'sdaia-ui';Installation
npx sdaia-ui@latest add range-slider
Usage
import { RangeSlider } from "@/components/ui/range-slider"<RangeSlider defaultValue={[20, 80]} />Examples
Default
Range slider with default variant
Loading preview…
1
'use client';2
3
import { RangeSlider } from 'sdaia-ui';4
5
export default function RangeSliderDefault() {Bottom floating
Range slider with label bottom floating.
Loading preview…
1
'use client';2
3
import { RangeSlider } from 'sdaia-ui';4
5
export default function RangeSliderBottomFloating() {Bottom Label
Range slider with the value label positioned below the track.
Loading preview…
1
'use client';2
3
import { RangeSlider } from 'sdaia-ui';4
5
export default function RangeSliderBottomLabel() {API Reference
RangeSliderProps
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 |