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:

1. Github Account
2. npm package

react-native-slider-text

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-cli
react-native init ProjectName
cd ProjectName

Once you have created the app. Add the following dependency to create your first custom slider text component

yarn add @react-native-community/slider
yarn add react-native-slider-text
cd 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

Conclusion:

Have Questions? Reach out to me via my Instagram or my Github page mentioned in the medium profile section.