Slider
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 preview…
1
'use client';2
3
import { Slider } from 'sdaia-ui';4
import { useState } from 'react';5
Installation
npx sdaia-ui@latest add slider
Usage
import { RangeSlider } from "@/components/ui/range-slider"<RangeSlider defaultValue={[20, 80]} />Examples
Bottom label
Slider with bottom label.
Loading preview…
1
'use client';2
3
import { Slider } from 'sdaia-ui';4
5
export default function SliderBottomLabel() {Floating label
Slider with floating label.
Loading preview…
1
'use client';2
3
import { Slider } from 'sdaia-ui';4
5
export default function SliderFloatingLabel() {No label
Slider with no label.
Loading preview…
1
'use client';2
3
import { Slider } from 'sdaia-ui';4
5
export default function SliderNoLabel() {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 |
label | 'inline' | 'bottom' | 'top-floating' | 'bottom-floating' | 'none' | 'inline' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
leadingIcon | boolean | false | optional |
trailingIcon | boolean | false | optional |
disabled | boolean | false | optional |