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.

In the first step Run the following command for create project.

expo init MyWebtutsProject

In the step,I will install @react-native-community/slider.

yarn add @react-native-community/slider

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;

In the last step run your project using bellow command.

expo start

It will help you..