Skip to main content
Version: Next 🚧

Migrate from @ptomasroos/react-native-multi-slider

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

- <MultiSlider
- values={price}
- min={0}
- max={500}
- step={10}
- sliderLength={280}
- onValuesChangeFinish={setPrice}
- enableLabel
- />
+ <Slider
+ range
+ value={price}
+ min={0}
+ max={500}
+ step={10}
+ onChange={setPrice}
+ valueLabel="always"
+ />
multi-sliderReact Native Pickers
values ([a] or [a, b])value: a number, or [start, end] with range
min / max / stepmin / max / step
onValuesChangeonValueChanging
onValuesChangeFinishonChange
onValuesChangeStart—
sliderLengthnot needed: the slider fills its container, or set style={{ width }}
optionsArray / snappedmarks={[…]} with snapToMarks
enableLabel / customLabelvalueLabel="always" or "drag", with formatValue
valuePrefix / valueSuffixformatValue={(v) => `$${v}`}
allowOverlap / minMarkerOverlapDistancethe thumbs can meet but not cross
selectedStyle / unselectedStylestyles={{ activeTrack, track }}
markerStyle / customMarkerstyles={{ thumb }}
enabledOne / enabledTwodisabled for the whole slider
vertical—

Slider has no native code or Reanimated, gives each thumb a screen-reader label (thumbLabels), and moves with arrow keys on the web.

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