Skip to content

Slider Primitive

An input allowing the user to choose a value from a specified range.

Installation

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/slider

Usage

import * as React from 'react';
import { View, Text, Platform } from 'react-native';
import * as SelectPrimitive from '@rn-primitives/select';
function Example() {
const [value, setValue] = React.useState(50);
return (
<View >
<Text>{Math.round(value)}</Text>
<Slider.Root
value={value}
onValueChange={(vals) => {
const nextValue = vals[0];
if (typeof nextValue !== 'number') return;
setValue(nextValue);
}}
>
<Slider.Track>
<Slider.Range
style={{ width: `${value}%` }}
/>
<Slider.Thumb
style={{ left: `${value}%` }}
/>
</Slider.Track>
</Slider.Root>
{Platform.OS !== 'web' && (
<Text>
You will have to implement the gesture handling
</Text>
)}
</View>
);
}

Props

Root

Extends View props

PropTypeNote
valuenumber(optional)
disabledboolean(optional)
minnumber(optional)
maxnumber(optional)
dir’ltr’ | ‘rtl’Web Only (optional)
invertedbooleanWeb Only (optional)
stepnumberWeb Only (optional)
onValueChange(value: string[] ) => voidWeb Only (optional)

Track

Extends View props

PropTypeNote
asChildboolean(optional)

Range

Extends View props

PropTypeNote
asChildboolean(optional)

Thumb

Extends View props

PropTypeNote
asChildboolean(optional)