Slider
An input where the user selects a value from within a given range.
Usage
This slider is built on top of @react-native-assets/slider .
import {Slider, RangeSlider} from "@/components/ui/slider";
<Slider defaultValue={[50]} max={100} />;
Components
Slider
A single-value slider component.
Prop | Type | Default | Description |
---|---|---|---|
defaultValue | number[] | - | Uncontrolled default value of the slider. |
value | number[] | - | Controlled value of the slider. |
onValueChange | (value: number[]) => void | - | Callback function called when the slider value changes. |
onValueCommit | (value: number[]) => void | - | Callback function called when the slider value is committed. |
min | number | 0 | The minimum value of the slider. |
max | number | 100 | The maximum value of the slider. |
step | number | 1 | The step increment of the slider. |
disabled | boolean | false | Whether the slider is disabled. |
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the slider. |
inverted | boolean | false | Whether the slider is inverted. |
size | "sm" | "md" | "lg" | "md" | The size of the slider track and thumb. |
color | "default" | "secondary" | "destructive" | "warning" | "success" | "default" | The color theme of the slider. |
borderRadius | "none" | "sm" | "md" | "lg" | "xl" | "full" | "full" | The border radius of the slider thumb. |
name | string | - | The name attribute of the slider. |
dir | "ltr" | "rtl" | - | The direction of the slider (left-to-right or right-to-left). |
form | string | - | The form attribute of the slider. |
minStepsBetweenThumbs | number | - | The minimum number of steps between thumbs for range sliders. |
RangeSlider
A range slider component with two thumbs for selecting a range of values.
Note: RangeSlider accepts the same props as Slider, but is designed to work with arrays of two values.
SliderThumb
The draggable thumb component of the slider.
Prop | Type | Default | Description |
---|---|---|---|
size | "sm" | "md" | "lg" | "md" | The size of the slider thumb. |
color | "default" | "secondary" | "destructive" | "warning" | "success" | "default" | The color theme of the slider thumb. |
borderRadius | "none" | "sm" | "md" | "lg" | "xl" | "full" | "full" | The border radius of the slider thumb. |
value | number | - | The current value of the slider thumb. |
SliderTrack
The track component that the thumb slides along.
Prop | Type | Default | Description |
---|---|---|---|
size | "sm" | "md" | "lg" | "md" | The size of the slider track. |
color | "default" | "secondary" | "destructive" | "warning" | "success" | "default" | The color theme of the slider track. |
disabled | boolean | false | Whether the slider track is disabled. |
Hooks
useSlider
The backbone hook for the slider component that provides state management and accessibility props.
Parameters:
Parameter | Type | Default | Description |
---|---|---|---|
props | SliderProps | - | Props to configure the behavior of the slider component. |
Returns:
{
componentProps: React.ComponentProps<typeof NativeSlider>;
}
Property | Type | Description |
---|---|---|
componentProps | React.ComponentProps<typeof NativeSlider> | Props to pass to the slider component. |
Styling
Slider Classes
Sizes:
sm
- Small slider:h-1
track,size-3
thumbmd
(default) - Medium slider:h-1.5
track,size-4
thumblg
- Large slider:h-2
track,size-5
thumb
Colors:
default
(default) - Primary color theme:bg-primary
track,border-primary
thumbsecondary
- Secondary color theme:bg-secondary
track,border-secondary
thumbdestructive
- Destructive color theme:bg-destructive
track,border-destructive
thumbwarning
- Warning color theme:bg-warning
track,border-warning
thumbsuccess
- Success color theme:bg-success
track,border-success
thumb
Border Radius:
none
- No border radius:rounded-none
sm
- Small radius:rounded-sm
md
- Medium radius:rounded-md
lg
- Large radius:rounded-lg
xl
- Extra large radius:rounded-xl
full
(default) - Full radius:rounded-full
Orientation:
horizontal
(default) - Horizontal slider withw-full
trackvertical
- Vertical slider withh-full
track