React Native Motion Slider

A JavaScript slider component for React Native (iOS and Android).
React Native Motion Slider is a high-quality slider with a stunning UI / UX.

Installation

npm install react-native-motion-slider --save

Usage

import MotionSlider from 'react-native-motion-slider';

<View>
    <MotionSlider
    	title={'Choose the desired temperature'} 
        min={-20} 
        max={40}
        value={25.8} 
        decimalPlaces={1}
        units={'º'}
        backgroundColor={['rgb(3, 169, 244)', 'rgb(255, 152, 0)', 'rgb(255, 87, 34)']}
        onValueChanged={(value) => console.log(value)}
        onPressIn={() => console.log('Pressed in')}
        onPressOut={() => console.log('Pressed out')}
        onDrag={() => console.log('Dragging')}
    />
</View>

API

Properties

| Property | Description | Type | |-----------------------|------------------------------------------------------------------|----------| | width | Slider width. | number | | height | Slider height. | number | | borderRadius | Slider border radius. | number | | backgroundColor | String array containing the slider colors. By default it has only one element. | [string] | | decimalPlaces | Decimal places to display on min, max and value elements. | number | | title | Slider title. | string | | titleColor | Slider title color. | string | | titleStyle | Slider title custom style. | StyleSheet | | min | Minimum value of the slider. | number | | max | Maximum value of the slider. | number | | value | Current slider value. | number | | units | Value units (e.g. 'km'). | string | | minColor | Color of min text element. | string | | maxColor | Color of max text element. | string | | valueColor | Color of value text element. | string | | valueBackgroundColor | Color of value container's background color. By default this color inherits the slider's background color. | string | | fontSize | Font size for min, max and value text elements. | number | | fontWeight | Font weight for min, max and value text elements. | string | | fontFamily | Font family for min, max and value text elements. | string |

Function Properties

| Property | Input | Notes | |-----------------------|--------------|-----------------------------------------------------------| | onValueChanged | Slider value | Use this to update catch slider value on parent component | | onPressIn | | | | onPressOut | | | | onDrag | | |

Acknowledgement

• Virgil Pana, who designed the concept and inspired me to create this component. I recommend checking his works.

License

MIT.