Skip to main content
Version: v0.27.0

Migrate from @react-native-community/slider

- import Slider from '@react-native-community/slider';
+ import { Slider } from '@elik56a/react-native-pickers';

- <Slider
- minimumValue={0}
- maximumValue={100}
- step={1}
- value={volume}
- onValueChange={setPreview}
- onSlidingComplete={setVolume}
- minimumTrackTintColor="#007AFF"
- />
+ <Slider
+ min={0}
+ max={100}
+ value={volume}
+ onValueChanging={setPreview}
+ onChange={setVolume}
+ theme={{ colors: { primary: '#007AFF' } }}
+ />
@react-native-community/sliderReact Native Pickers
minimumValue / maximumValue (default 0 / 1)min / max (default 0 / 100)
step (default 0, continuous)step (default 1; 0 for continuous)
value (write-only, read once)value (controlled) or defaultValue
onValueChangeonValueChanging, on every step of a drag
onSlidingCompleteonChange, once the finger lifts, or on a key or screen-reader step
onSlidingStart—
lowerLimit / upperLimitmin / max
minimumTrackTintColor / thumbTintColortheme={{ colors: { primary } }}, or styles={{ activeTrack, thumb }}
maximumTrackTintColorstyles={{ track }}
thumbSize / thumbImagestyles={{ thumb }}
StepMarker / renderStepNumbershowSteps, or marks with labels
invertedfollows the layout direction: right to left in RTL
tapToSeekalways on
—range for two thumbs, valueLabel bubble, snapToMarks, minimumIcon / maximumIcon, keyboard steps on the web

Two defaults differ: max is 100 rather than 1, and step is 1 rather than continuous. Pass max={1} step={0} to keep a 0–1 slider.

Slider has no native code, so it runs in Expo Go, ships in OTA updates and draws the same on the web.

See all migration guides for other libraries, and Comparison for when another library is the better choice.