Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

rn-awesome-slider

yoavstezki15MIT1.0.2TypeScript support: included

A awesome sliders for Weight and Height

slider, sliders, weight, height, rn, react-native, ios, android

readme

React Native Awesome Sliders

Installation

yarn add rn-awesome-slider

# or

npm install rn-awesome-slider

Height Slider

A Height slider is a design component that enables the selection of height between custom ranges.
As a rule of thumb, the component height equals the screen height multiplied by 0.6

preview

Properties

Property Description Type
gender Gender of the lottie to display
Default male.		 Gender
measureData.range The measure range.
Default from: 40, to: 240.		 Range
measureData.step The measure step.
Default 10		 number
measureData.sectionSize The number of lines in each section.
Default 6		 number
measureData.initialValue Initial maximum value of the slider.
Half of the range.to.		 number
labelData.hint The hint text below the label.
Default value is Kg.		 string
labelData.color The color of the label text
Default value is #8503e3.		 color
labelData.fractionDigits The digits fraction to display on the text label
Default value is 0.		 number
labelData.placeholder The text to display on the text label when slider on minimum value.
Default value is range.from.		 number
cursorData.color The color of the cursor
Default value is #8503e3.		 color
dividerData.color The color of the divider
Default value is #bababa.		 color
onSlidingStart Callback that is called when the user picks up the slider.
The initial value is passed as an argument to the callback handler.		 function
onSlidingEnd Callback that is called when the user releases the slider, regardless if the value has changed.
The current value is passed as an argument to the callback handler.		 function
onValueChange Callback continuously called while the user is dragging the slider. function

Usage

import React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import { WeightSlider } from 'rn-awesome-slider';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 44,
    paddingBottom: Platform.OS === 'ios' ? 44 : 12,
    backgroundColor: '#ffffff',
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <WeightSlider
        measureData={{ range: { from: 40, to: 240 }, step: 20, sectionSize: 6, initialValue: 120 }}
        labelData={{ color: '#EE6000FF' }}
        cursorData={{ color: '#EE6000FF' }}
      />
    </View>
  );
}

Weight Slider

A weight slider is a design component that enables the selection of weight between custom ranges.

preview

Properties

Property Description Type
gender Gender of the lottie to display
Default male.		 Gender
measureData.range The measure range.
Default from: 0, to: 160.		 Range
measureData.step The measure step.
Default 10		 number
measureData.sectionSize The number of lines in each section.
Default 10		 number
measureData.initialValue Initial maximum value of the slider.
Half of the range.to.		 number
labelData.hint The hint text below the label.
Default value is Cm.		 string
labelData.color The color of the label text
Default value is #8503e3.		 color
labelData.fractionDigits The digits fraction to display on the text label
Default value is 0.		 number
labelData.placeholder The text to display on the text label when slider on minimum value.
Default value is range.from.		 number
cursorData.color The color of the cursor
Default value is #8503e3.		 color
onSlidingStart Callback that is called when the user picks up the slider.
The initial value is passed as an argument to the callback handler.		 function
onSlidingEnd Callback that is called when the user releases the slider, regardless if the value has changed.
The current value is passed as an argument to the callback handler.		 function
onValueChange Callback continuously called while the user is dragging the slider. function

Usage

import React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import { HeightSlider } from 'rn-awesome-slider';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 44,
    paddingBottom: Platform.OS === 'ios' ? 44 : 12,
    backgroundColor: '#ffffff',
  },
});

export default function App() {
  return (
    <View style={styles.container}>
      <HeightSlider
        gender={'female'}
        measureData={{ range: { from: 0, to: 160 }, step: 10, sectionSize: 10, initialValue: 65 }}
        labelData={{ placeholder: '00' }}
        dividerData={{ color: 'blue' }}
        cursorData={{ color: 'blue' }}
      />
    </View>
  );
}

License

MIT