Rn-awesome-slider NPM

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	No
`measureData.range`	The measure range. Default `from: 40`, `to: 240`.	Range	No
`measureData.step`	The measure step. Default `10`	number	No
`measureData.sectionSize`	The number of lines in each section. Default `6`	number	No
`measureData.initialValue`	Initial maximum value of the slider. Half of the `range.to`.	number	No
`labelData.hint`	The hint text below the label.Default value is `Kg`.	string	No
`labelData.color`	The color of the label text Default value is `#8503e3`.	color	No
`labelData.fractionDigits`	The digits fraction to display on the text label Default value is `0`.	number	No
`labelData.placeholder`	The text to display on the text label when slider on minimum value. Default value is `range.from`.	number	No
`cursorData.color`	The color of the cursorDefault value is `#8503e3`.	color	No
`dividerData.color`	The color of the dividerDefault value is `#bababa`.	color	No
`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	No
`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	No
`onValueChange`	Callback continuously called while the user is dragging the slider.	function	No

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	No
`measureData.range`	The measure range. Default `from: 0`, `to: 160`.	Range	No
`measureData.step`	The measure step. Default `10`	number	No
`measureData.sectionSize`	The number of lines in each section. Default `10`	number	No
`measureData.initialValue`	Initial maximum value of the slider. Half of the `range.to`.	number	No
`labelData.hint`	The hint text below the label.Default value is `Cm`.	string	No
`labelData.color`	The color of the label text Default value is `#8503e3`.	color	No
`labelData.fractionDigits`	The digits fraction to display on the text label Default value is `0`.	number	No
`labelData.placeholder`	The text to display on the text label when slider on minimum value. Default value is `range.from`.	number	No
`cursorData.color`	The color of the cursorDefault value is `#8503e3`.	color	No
`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	No
`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	No
`onValueChange`	Callback continuously called while the user is dragging the slider.	function	No

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

slider sliders weight height rn react-native ios android

@infinitebrahmanuniverse/nolb-rn-a @everything-registry/sub-chunk-2673

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago