Why we use range-slider functionality :

range-slider is use to select the range between max and min values this is a very common react native functionality, so here we are discuss about setting the range-slider values dynmically, let’s start the topic “How to use react-native range-slider with set dynamic min-max value“.

Output example –

Here we broke the whole article into steps, so you only need to follow all these steps carefully.

Step 1:

Very first we need install the plugin.

npm install –save react-native-range-slider

Step 2:

Link the plugin if your react native version is less than 0.60, otherwise it auto link the plugin.

react-native link react-native-range-slider

Step 3:

Now plugin is ready for use, import this plugin where you want to use range-slider

import RangeSlider from ‘react-native-range-slider‘

Step 4:

Here we are going to declare 2 state, one for minimum and other for maximum.

constructor(props) {
    super(props);
    this.state = {
     min :0,
     max: 100
    };
  }

Step 5:

Now implement the code section

<View style={{flex:1,flexDirection:'row'}}>
<RangeSlider
minValue={0}
maxValue={100}
tintColor={'#da0f22'}
handleBorderWidth={1}
handleBorderColor="#454d55"
selectedMinimum={this.state.min}
selectedMaximum={this.state.max}
style={{flex:1,height:70,padding:10,backgroundColor:'#ddd'}}
onChange={(data)=>{console.log(data);}}
/>
</View>

Note: this.state.min and max value are dynamically set.

So we completed the react native range-slider functionality in this tutorial which is “How to use react-native range-slider with set dynamic min-max value“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.