Slider is used to select a value by dragging instead of manually writing the values. It used to come in React Native itself, but it was discontinued. A quick search allowed me to find one, that works great in android. So, in this article, we are going to see how to install and import a slider. And how can you use it in your own projects. I am also going to show you how I have used this.

1. What is a slider?

A Slider allows you to select a single value from a range of values. You don’t need to enter value manually. You can simply drag and select your desired value.

2. How to install a slider?

React Native used to have a slider in its library, but it’s deprecated now, and we now have to use one from Community packages. The one I have is this. And it is really easy to install it. Just run the following command and you are good to go.

Npm:  npm install @react-native-community/slider --save
Yarn: yarn add @react-native-community/slider

3. How to use a slider?

In order to properly use a slider, you need to know the minimum value and also the maximum value, you can select/slide to. For that, we have minimumValue and maximumValue. You also need to know the step increase. For example, you can use step of 1 to increment by 1 or Step of 2 to increment by 2, and so on.

You can change the color of the track, set image for thumb and so on. For complete list of functions, properties, you can read the properties section.

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

const [heightSlider, setHeightSlider] = useState()
<Slider
  minimumValue={50}
  maximumValue={270}
  minimumTrackTintColor="#DDDDDD"
  maximumTrackTintColor="#000000"
  step={1}
  onValueChange={value=>setHeightSlider(value)}
/>

Another thing that you will need to use is the onValueChange property. It basically allows you to set another variable if you move that slider. It helps to capture the value, which you can use later on for your project. So, as soon as I move that slider, it is going to trigger onValueChange, set value of Height variable, which I can use later on.

4. How I have used it for my app?

I have used slider for my recently released app. I have used it for BMI calculation, and it is used to select values of height and weight.

const [heightSlider, setHeightSlider] = useState()

<View className="h-36  w-1/1 mx-5 my-3 rounded-md  items-center bg-white">
     <Text className='text-center mt-3 text-lg'>Height in centimeters</Text>
     <Text className="text-4xl font-bold mt-5">{heightSlider} cm</Text>

<Slider
  style={{width: 200, height: 40}}
  minimumValue={50}
  maximumValue={270}
  minimumTrackTintColor="#DDDDDD"
  maximumTrackTintColor="#000000"
  step={1}
  onValueChange={value=>setHeightSlider(value)}
/>
    </View>

5. Conclusion

Slider provides a nice way to get a value from list of values. You don’t really need to enter values manually. This package is great. I have used it for my app, which I released recently.

Comment down below, how are you going to use it.