react-native-slider-text
React Native Slider is a component to select a single value from a range of values. We have mostly seen slider while increasing or decreasing the volume or brightness of our phone. Here is the example of the slider which will be helpful for you to integrate slider in your app.
Source Code:
- Github Account
- npm package
Installation
You need to install the following packages to integrate this component into your react native app.
Create a new React Native Project
Add the following commands to create a new react native project.
npm install -g react-native-clireact-native init ProjectNamecd ProjectName
Once you have created the app. Add the following dependency to create your first custom slider text component
yarn add @react-native-community/slideryarn add react-native-slider-textcd ios && pod install
Update App.js File
Remove the existing code in the App.js file and add the following code.
import React, { useState } from 'react';
import {View, Text, StyleSheet} from 'react-native';
import SliderText from 'react-native-slider-text';const App = () => {
const [sliderValue, setSliderValue] = useState(0);
return (
<View style={styles.container}>
<Text style={styles.title}>
Little interest or pleasure in doing things?
</Text>
<SliderText
minimumTrackTintColor="#000"
thumbTintColor="#000"
maximumTrackTintColor="#099"
maximumValue={5}
stepValue={1}
minimumValueLabel="Never"
maximumValueLabel="Always"
onValueChange={(id) => setSliderValue(id)}
sliderValue={sliderValue}
/>
</View>
);};const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
},
title: {
fontSize: 24,
fontWeight: 'bold',
},
});export default App;
Custom Props to the component
maximumValue:
You can change the maximum value of the slider to a max of 100000 and it will adjust the display accordingly.
stepValue:
The step is basically the dividend value by default it is 1. You can customize it based on your requirements.
multiplier
:
This is a decimal value that handles the position in a perfect position. By default, it is 1.12. Feel free to play with this value and the position of the slider will be handled in real-time.
minimumTrackTintColor
:
Add any hex code or color value string depending on your requirements.
thumbTintColor:
Add any hex code or color value string depending on your requirements.
maximumTrackTintColor
:
Add any hex code or color value string depending on your requirements.
sliderValueStyle
:
Custom Text styles can be added to update the look and feel of the moving label over the slider.
customLabelStyle
:
Custom Text styles can be added to update the look and feel of the labels that are showing the start and end labels at the bottom of the slider.
onValueChange
:
A custom function can be added to update the slider value to manage the state
sliderValue
:
the current value of the slider. You can use this value to access the slider value.
Final Step
Now you are done with the installation and ready to launch the app with a brand new custom slider with moving text.
react-native run-ios