React Native Range Slider Example
Nov 13, 2021 . Admin

Hi Guys,
Today, I will learn you how to implement simple range slider in react native. we will show example of react native range slider.
Here, I will give you full example for simply implement simple range slider using react native as bellow.
Step 1 - Create projectIn the first step Run the following command for create project.
expo init MyWebtutsProjectStep 2 - Install Package
In the step,I will install @react-native-community/slider.
yarn add @react-native-community/sliderStep 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 MyWebtutsProject = () => { 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 MyWebtutsProject;Step 4 - Run project
In the last step run your project using bellow command.
expo startOutput

It will help you..