Example of React Native Community Slider in Android iOS

Hello guys, It’s been almost a week since I had posted a tutorial. So now to wait is over. In today’s tutorial we would learn about a react native’s NPM library @react-native-community/slider. The @react-native-community/slider library is used to create simple slider, trackbar, seek bar in react native. The main function of slider is to increase or decrease value on a fixed parameter when the slider moves forward or backward. So in this tutorial we would learn about Example of React Native Community Slider in Android iOS Application. You can also visit its official NPM page here.

Contents in this project Example of React Native Community Slider in Android iOS :-

1. First of all we have to install the @react-native-community/slider NPM package in our react native project. So open your react native project Root directory in CMD in windows and in Terminal in MAC and execute below command.

<br />
npm install @react-native-community/slider –save

1	npm install @react–native–community/slider —save

Screenshot :-

Screenshot on finish installation :-

2. Now in the next step we would start coding for the application. So open your project’s main App.js file and import View, StyleSheet, Text and useState component.

<br />
import React, { useState } from ‘react’;</p>
<p>import { View, StyleSheet, Text } from ‘react-native’;

import React, { useState } from ‘react’;

import { View, StyleSheet, Text } from ‘react-native’;

3. Import Slider component from ‘@react-native-community/slider’ .

<br />
import Slider from ‘@react-native-community/slider’;

1	import Slider from ‘@react-native-community/slider’;

4. Creating our main Export default functional component App.

<br />
export default function App() {</p>
<p>}

export default function App() {

}

5. Creating a State named as data with State change function setSliderData. Here we would set the default data value to 10. This would make the Slider default value of 10.

<br />
  const [data, setSliderData] = useState(10);

1	const [data, setSliderData] = useState(10);

6. We would make 1 Text component in the return() block of code, In this text we would display the Slider data state value.

<br />
      <Text style={{ fontSize: 28 }}><br />
        Value of slider is : {data}<br />
      </Text>

Value of slider is : {data}

</Text>

7. Now we would make the Slider component. I’m using most of Slider Props in our current example, But there are more of them, You can read about the remaining Props here on the package page.

maximumValue : To define maximum value of a Slider.
minimumValue : Minimum value of slider, From which value the slider should start.
minimumTrackTintColor : This is the color of Slider which is moved.
maximumTrackTintColor : The color of Slider which is remaining after moving.
step : The value should be increased like +1 .
value : Value of Slider.
onValueChange : Calls whenever value is changed of Slider.
thumbTintColor : Slider moving round button color.

<br />
<Slider<br />
        maximumValue={100}<br />
        minimumValue={0}<br />
        minimumTrackTintColor=”#D50000″<br />
        maximumTrackTintColor=”#01579B”<br />
        step={1}<br />
        value={data}<br />
        onValueChange={<br />
          (sliderValue) => setSliderData(sliderValue)<br />
        }<br />
        thumbTintColor=”#1B5E20″<br />
        style={{width: 400, height: 40}}<br />
      />

<Slider

maximumValue={100}

minimumValue={0}

minimumTrackTintColor=“#D50000”

maximumTrackTintColor=“#01579B”

step={1}

value={data}

onValueChange={

(sliderValue) => setSliderData(sliderValue)

}

thumbTintColor=“#1B5E20”

style={{width: 400, height: 40}}

8. Creating style.

<br />
const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    padding: 10,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’<br />
  }<br />
});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

padding: 10,

justifyContent: ‘center’,

alignItems: ‘center’

}

});

9. Complete Source Code for App.js file :-

<br />
import React, { useState } from ‘react’;</p>
<p>import { View, StyleSheet, Text } from ‘react-native’;</p>
<p>import Slider from ‘@react-native-community/slider’;</p>
<p>export default function App() {</p>
<p>  const [data, setSliderData] = useState(10);</p>
<p>  return (<br />
    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={{ color: ‘blue’, fontSize: 30, textAlign: ‘center’ }}><br />
        Example of React Native Community/Slider<br />
      </Text></p>
<p>      <Text style={{ fontSize: 28 }}><br />
        Value of slider is : {data}<br />
      </Text></p>
<p>      <Slider<br />
        maximumValue={100}<br />
        minimumValue={0}<br />
        minimumTrackTintColor=”#D50000″<br />
        maximumTrackTintColor=”#01579B”<br />
        step={1}<br />
        value={data}<br />
        onValueChange={<br />
          (sliderValue) => setSliderData(sliderValue)<br />
        }<br />
        thumbTintColor=”#1B5E20″<br />
        style={{width: 400, height: 40}}<br />
      /></p>
<p>    </View><br />
  );<br />
}</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    padding: 10,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’<br />
  }<br />
});

import React, { useState } from ‘react’;

import { View, StyleSheet, Text } from ‘react-native’;

import Slider from ‘@react-native-community/slider’;

export default function App() {

const [data, setSliderData] = useState(10);

return (

Example of React Native Community/Slider

</Text>

Value of slider is : {data}

</Text>

<Slider

maximumValue={100}

minimumValue={0}

minimumTrackTintColor=“#D50000”

maximumTrackTintColor=“#01579B”

step={1}

value={data}

onValueChange={

(sliderValue) => setSliderData(sliderValue)

}

thumbTintColor=“#1B5E20”

style={{width: 400, height: 40}}

</View>

);

}

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

padding: 10,

justifyContent: ‘center’,

alignItems: ‘center’

}

});

Screenshots :-

Example of React Native Community Slider in Android iOS

Contents in this project Example of React Native Community Slider in Android iOS :-

Also Read :

Recent Posts

Search Here