React-native-slider-text NPM

React Native Slider Text

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

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)	`-`