1.2.1 • Published 5 years ago
react-native-list-slider v1.2.1
react-native-list-slider
List slider for React Native - Pure JS Slider base on FlatList. Android and iOS platform supported. Tested on RN version 0.55.x.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| value | Number | required | Default value which will be used. |
| onValueChange | Function | required | Callback called on every value changed. value: Number as parameter. |
| multiplicity | Number | 0.1 | |
| decimalPlaces | Number | 1 | |
| arrayLength | Number | 10000 | |
| renderThumb | Function | optional | Function to render thumb - middle component which is fixed |
| thumbStyle | Object | optional | You can pass your style to overwrite default one |
| mainContainerStyle | Object | optional | You can pass your style to overwrite default container style |
| itemStyle | Object | optional | You can pass your style to overwrite default item style |
| tenthItemStyle | Object | optional | You can pass your style to overwrite active item style |
| scrollEnabled | boolean | true | Is enabled to scroll or not |
| initialPositionValue | number | undefined | value of 1st element |
| maximumValue | number | undefined | max value to achieve |
How to use it
import React, { Component } from 'react';
import ReactNative from 'react-native';
import RNListSlider from 'react-native-list-slider';
const {
View,
Text,
StyleSheet,
} = ReactNative;
export default class App extends Component {
state = {
value: 0,
};
onValueChanged = value => this.setState({ value });
render() {
return (
<View style={styles.container}>
<View>
<Text>Value: {this.state.value}</Text>
</View>
<RNListSlider
value={this.state.value}
onValueChange={this.onValueChanged}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});Example
$ cd example
$ yarn
$ react-native run-iosLicense
MIT