Slider
A control for selecting a value from a continuous or stepped range.
For the complete documentation index, see llms.txt. Use this file to discover all available pages.
A controlled slider for selecting a numeric value within a range. Pair value with onValueChange to manage state from React.
Installation
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
Usage
Continuous slider
The default range is [0, 1].
import { useState } from 'react'; import { Host, Slider } from '@expo/ui'; export default function ContinuousSliderExample() { const [value, setValue] = useState(0.5); return ( <Host style={{ flex: 1 }}> <Slider value={value} onValueChange={setValue} /> </Host> ); }
Stepped slider with custom range
Use min, max, and step to constrain the values produced by the slider.
import { useState } from 'react'; import { Host, Column, Slider, Text } from '@expo/ui'; export default function SteppedSliderExample() { const [volume, setVolume] = useState(50); return ( <Host style={{ flex: 1 }}> <Column spacing={8}> <Text>Volume: {volume}</Text> <Slider value={volume} onValueChange={setVolume} min={0} max={100} step={10} /> </Column> </Host> ); }
API
import { Slider } from '@expo/ui';
Component
Type: React.Element<SliderProps>
A control for selecting a value from a continuous or stepped range.
Props for the Slider component.
booleanWhether the slider is disabled. Disabled sliders do not respond to user interaction.
ModifierConfig[]Platform-specific modifier escape hatch. Pass an array of modifier configs
from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers.
(value: number) => voidCalled when the user changes the slider value.
numberIncrement size. For example, step={10} with min={0} and max={100} produces values 0, 10, 20, …, 100.
stringIdentifier used to locate the component in end-to-end tests.