How to Add a Slider Component in React Native

Last Updated on December 15, 2020.

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 .

Following is the basic example of react native slider.

Class Component

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sliderValue: 10,
    };
  }

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

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

Function Component

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, following is the output of the above react native slider example.

Thank you for reading!

1 thought on “How to Add a Slider Component in React Native”

  1. TypeError: Object(…) is not a function

    This is the error when the above is run
    I am unable to find out the issue
    Running through npm/expo/visual studio code

Leave a Reply

%d bloggers like this: