How to add slider in React Native
In React Native, a slider is a UI component that allows users to select a value within a predefined range by dragging a thumb/cursor along a track. It is necessary for creating interactive and intuitive user interfaces, especially in scenarios where users need to input numerical values, such as setting volume levels, selecting date ranges, or adjusting brightness settings.
Therefore, we need to use a library to render a slider in React Native. For this purpose, we use the @react-native-community/slider library, which enables developers to incorporate sliders into their React Native applications easily.
Installing dependencies
We'll need to install a few packages using npm, so make sure that your React Native application is built before we proceed.
You can see here how to create a React Native application.
Navigate to the root directory of your React Native project and install the dependencies using the following commands.
cd newProjectnpm i @react-native-community/slider
Creating a slider
We can easily create a slider in a React Native application by first importing the @react-native-community/slider to the file and then we can add the following code:
import Slider from '@react-native-community/slider';<Sliderstyle={{width: 200, height: 40}}minimumValue={0}maximumValue={1}minimumTrackTintColor="#FFFFFF"maximumTrackTintColor="#000000"/>
This code represents a Slider component with a width of 200 and a height of 40. It allows users to select values between 0 and 1, with the track colors set to white (minimumTrackTintColor) and black (maximumTrackTintColor).
Slider in React Native application
We will see how the slider can be optimized and used in a real React Native application. We can use sliders for different purposes, such as volume, ratings, etc.
{
"name": "awesomeproject",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@expo/webpack-config": "^18.0.1",
"@react-native-community/slider": "^4.4.2",
"expo": "~48.0.18",
"expo-status-bar": "~1.4.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.8",
"react-native-web": "~0.18.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"react-native-svg-transformer": "^1.0.0"
},
"private": true
}
Note: Press 'w' key to see the output in web browser.
This code is a React Native app that demonstrates the use of sliders with various configurations. The app displays four sliders, each with a different range and step value, allowing users to select values between the minimum and maximum values defined.
Slider 1: Range 0 to 100, step 1, track colors - blue and black (Lines 16 – 24).
Slider 2: Range 0 to 100, step 5, track colors - orange and black (Lines 29 – 37).
Slider 3: Range 0 to 1, step 0.5, track colors - green and black (Lines 42 – 50).
Slider 4: Range 0 to 1, step 0.1, track colors - purple and black (Lines 55 – 63).
As the sliders are moved, their current values are displayed below them. Users can interact with the sliders to set specific numeric values within the given ranges.
Slider has many props you can utilize according to your application's requirements. Here are a few of them tabulated below:
Slider props
Property | Description | Type | Required |
| Initial maximum value of the slider. Default value is 1. | number | No |
| The color used for the track to the left of the button. Overrides the default blue gradient image on iOS. | color | No |
| Initial minimum value of the slider. Default value is 0. | number | No |
| Slide lower limit. The user won't be able to slide below this limit. | number | No |
| Slide upper limit. The user won't be able to slide above this limit. | number | No |
| Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0. | number | No |
| Callback continuously called while the user is dragging the slider. | function | No |
| Reverses the direction of the slider. Default value is false. | bool | No |
| Changes the orientation of the slider to vertical, if set to Default value is false. | bool | No |
Conclusion
Sliders enhance the user experience by providing a visual representation of the selectable range and offering precise control over numeric input, making apps more user-friendly and accessible. You can use the @react-native-community/slider library to add sliders to your React Native application.
