react-native-range v1.0.1

react-native-range

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

Examples

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

Getting Started

• Installation

Installation

$ npm install --save react-native-range

Usage in a ScrollView

 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.