Radix 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} />;

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.

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.

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.

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.

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.

Sizes:

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:

Orientation: