04-Apr-2023
.
Admin
Hi Guys,
In this tutorial, I will learn you how to implement simple range slider in your app using react native.
Here, i will give you complete example for implementing range slider using react native as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init nicesnippetsApp
Step 2 - Install Package
In the step,I will install @react-native-community/slider.
yarn add @react-native-community/slider
Step 3 - App.js
In this step, You will open App.js file and put the code.
import React, {useState} from 'react';
import { View, Text, SafeAreaView, StyleSheet } from 'react-native';
import Slider from '@react-native-community/slider';
const nicesnippetsApp = () => {
const [sliderValue, setSliderValue] = useState(15);
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<Text style={styles.title}>
Value : {sliderValue}
</Text>
<Slider
maximumValue={100}
minimumValue={0}
minimumTrackTintColor="#307ecc"
maximumTrackTintColor="#000000"
step={1}
value={sliderValue}
onValueChange={
(sliderValue) => setSliderValue(sliderValue)
}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
title: {
textAlign: 'center',
color: 'black',
fontSize: 18,
}
});
export default nicesnippetsApp;
Step 4 - Run project
In the last step run your project using bellow command.
npm start
Output
It will help you...
#React Native