react-native-multi-slider

Pure JS react native slider component with one or two markers. Options to customize track, touch area and provide customer markers and callbacks for touch events and value changes.

Examples

cd example/Basic
npm install
react-native run-ios
react-native run-android

Getting Started

• Installation

Installation

$ npm install --save @ptomasroos/react-native-multi-slider

Usage in a ScrollView

import MultiSlider from '@ptomasroos/react-native-multi-slider';

...

 enableScroll = () => this.setState({ scrollEnabled: true });
 disableScroll = () => this.setState({ scrollEnabled: false });

 render() {
   return (
     <ScrollView scrollEnabled={this.state.scrollEnabled}>
      <MultiSlider
        ...
        onValuesChangeStart={this.disableScroll}
        onValuesChangeFinish={this.enableScroll}
      />
    </ScrollView>
    );

shape up CustomMarker as left and right

In order to make different styles on markers you can set isMarkersSeparated to true, define customMarkerLeft and customMarkerRight in MultiSlider. for example:

<MultiSlider
    ...
    isMarkersSeparated={true}

    customMarkerLeft={(e) => {
         return (<CustomSliderMarkerLeft
          currentValue={e.currentValue}/>)
    }}

    customMarkerRight={(e) => {
         return (<CustomSliderMarkerRight
         currentValue={e.currentValue}/>)
    }}
/>

Partial report of the props

Feel free to contribute to this part of the documentation.

Recommendations

For very large min = 0 & max = 99999999 and very small step = 1, the step generation loop generates very large array which can causes a crash. Its better to dynamically generate a step size in those cases.

step = Math.round(Math.abs(max - min) / 100)

Credit https://github.com/ptomasroos/react-native-multi-slider/issues/281#issuecomment-1700770841