react-native-slider-text

    0.0.10 • Public • Published

    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

    Install

    npm i react-native-slider-text

    DownloadsWeekly Downloads

    21

    Version

    0.0.10

    License

    ISC

    Unpacked Size

    123 kB

    Total Files

    6

    Last publish

    Collaborators

    • jamessudhir