react-native-motion-slider's Introduction

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 --save react-native-motion-slider

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.

react-native-motion-slider's People

Contributors

Stargazers

Watchers

react-native-motion-slider's Issues

No interaction in iOS simulator

Hi,

I'm having an issue on the latest revisions of React Native via Expo (same behaviour happens when building the app),
The component renders fine on web, iOS, Android but the user can only interact with it on web.

Any idea on what might block here ?

<MotionSlider
      value={value}
      backgroundColor={['rgb(190,15,52)']}
      fontSize={17}
      min={range_start}
      max={range_end}
      onValueChanged={setValue}
/>

Toggle between single or multi slider mode?

Hey, just want to point out, fantastic work on the fluid UI. Looks super amazing. I just wanted to ask, do you have any plans to make this slider from single slider to multi slider with Two Thumbs? And then have a boolean toggle prop to let the user switch between both Slider Modes?

If yes, when can we possibly expect for it to be released for this library?

Changing Min, Max numbers depending on scale

<View>
          <MotionSlider
            title={'Choose the desired temperature'}
            min={57}
            max={99}
            value={80}
            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>

I dont understand why my app keeps breaking if the value i have set is between the Min/Max. Any idea of how to fix it?

I'm getting "Invariant violation: inputRange must be monotonically non-decreasing 57,33,99"

Giving error when i set the min value to 0 nad max value to 10 it shows => Invariant Violation:inveriant Violation:inputRange must be monotonically non-decreasing 0, 33, 10

Recommend Projects

vitorcodes / react-native-motion-slider Goto Github PK