vikrantnegi/react-native-slider-text

A react native component to show moving text along the slider thumb

React Native Slider Text

Read more about this package here.

A React Native Slider Component which is built around react-native-slider providing the user ability to add moving slider value alongside the slider thumb. You can also add custom labels displaying the start text and end text below the slider.

     

Prerequisites

Kindly install @react-native-community/slider before you start using this component.

yarn add @react-native-community/slider

Using React Native CLI

Install

yarn add react-native-slider-text

or

npm install react-native-slider-text --save

Usage

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SliderText from 'react-native-slider-text';

const Score = () => {
  const [sliderValue, setSliderValue] = useState(0);
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Little interest or pleasure in doing things?</Text>
      <Text style={styles.tag}>Rate your answer here: </Text>
      <SliderText maximumValue={10} 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',
  },
  tag: {
    fontSize: 14,
    paddingVertical: 10,
  },
});

export default Score;

Props

Prop	Description	Default
maximumValue	Add the maximum value of the slider here. (Number)	10
minimumValue	Add the minimum value of the slider here. (Number)	0
stepValue	Step value of the slider (Number)	1
value	value of the slider (Number)	1
sliderValue	dynamic value of the slider (Number)	1
multiplier	This is the universal logic to adjust the text location over the thumb. User may need to manipulate it depending on the maximum value. (Decimal value)	1.12
minimumTrackTintColor	Custom color for minimum slider progress. (color)	#000
thumbTintColor	Custom color for thumb. (color)	#000
maximumTrackTintColor	Custom color for maximum slider progress. (color)	#000
customCountStyle	Customize moving text slider value. You can add any styles related to Text Component in React Native. (style)	-
customLabelStyle	Customize label style below the slider. You can add any styles related to Text Component in React Native. (style)	-
onValueChange	function to manage the slider value on change of the slider thumb position. (function)	-

License

Licensed under the MIT.

Donation

If this project helped you reduce time to develop, please consider buying me a cup of coffee :)