Skip to Content

Built by moveinready.casa  and the community

Shadcn Docs

Radix Docs

Slider Docs

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.

PropTypeDefaultDescription
defaultValuenumber[]-Uncontrolled default value of the slider.
valuenumber[]-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.
minnumber0The minimum value of the slider.
maxnumber100The maximum value of the slider.
stepnumber1The step increment of the slider.
disabledbooleanfalseWhether the slider is disabled.
orientation"horizontal" | "vertical""horizontal"The orientation of the slider.
invertedbooleanfalseWhether 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.
namestring-The name attribute of the slider.
dir"ltr" | "rtl"-The direction of the slider (left-to-right or right-to-left).
formstring-The form attribute of the slider.
minStepsBetweenThumbsnumber-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.

PropTypeDefaultDescription
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.
valuenumber-The current value of the slider thumb.

SliderTrack

The track component that the thumb slides along.

PropTypeDefaultDescription
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.
disabledbooleanfalseWhether the slider track is disabled.

Hooks

useSlider

The backbone hook for the slider component that provides state management and accessibility props.

Parameters:

ParameterTypeDefaultDescription
propsSliderProps-Props to configure the behavior of the slider component.

Returns:

{ componentProps: React.ComponentProps<typeof NativeSlider>; }
PropertyTypeDescription
componentPropsReact.ComponentProps<typeof NativeSlider>Props to pass to the slider component.

Styling

Slider Classes

Sizes:

  • sm - Small slider: h-1 track, size-3 thumb
  • md (default) - Medium slider: h-1.5 track, size-4 thumb
  • lg - Large slider: h-2 track, size-5 thumb

Colors:

  • default (default) - Primary color theme: bg-primary track, border-primary thumb
  • secondary - Secondary color theme: bg-secondary track, border-secondary thumb
  • destructive - Destructive color theme: bg-destructive track, border-destructive thumb
  • warning - Warning color theme: bg-warning track, border-warning thumb
  • success - 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 with w-full track
  • vertical - Vertical slider with h-full track

shadcn-native

Built by moveinready.casa and the community