How to Add a Slider Component in React Native

A slider is a very common component used in mobile apps. Sliders can be used for taking inputs easily – for example, a volume control. In this blog post, let’s check how to add a slider in your react native app.

First of all, you have to get the Slider component from react native community. Run any of the following commands.

yarn add @react-native-community/slider

or

npm install @react-native-community/slider –save

For iOS, don’t forget to run pod install .

You can use the slider as given below.

import Slider from '@react-native-community/slider';

<Slider
  style={{width: 200, height: 40}}
  minimumValue={0}
  maximumValue={1}
  minimumTrackTintColor="#FFFFFF"
  maximumTrackTintColor="#000000"
/>

Following is the basic example of react native slider.

import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';
import Slider from '@react-native-community/slider';

const App = () => {
  const [sliderValue, setSliderValue] = useState(10);

  return (
    <View style={styles.container}>
      <Slider
        style={styles.slider}
        minimumValue={4}
        maximumValue={32}
        thumbTintColor="black"
        step={1}
        value={sliderValue}
        minimumTrackTintColor="blue"
        maximumTrackTintColor="gray"
        onValueChange={value => setSliderValue(value)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  slider: {
    height: 45,
    width: '80%',
  },
});

export default App;

As you can see, the Slider component has many props. The value and onValueChange props are for the basic functionality of the slider.

The minimumValue, maximumValue, and step props are used for configuring the values of the slider. The style, thumbTintColor, minimumTrackTintColor, and maximumTrackTintColor are used for styling the slider.

There are also some other props and you can get them from here.

Finally, the following is the output of the above react native slider example.

That’s how you add a slider component in react native. Thank you for reading!