react-native-slider-text

A react native slider with custom text labels to show the current progress.

Usage no npm install needed!

<script type="module">
  import reactNativeSliderText from 'https://cdn.skypack.dev/react-native-slider-text';
</script>

README

React Native Slider Text

Read more about this package here.

downloads npm-version license

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

Buy Me A Coffee

ko-fi