1.0.2 • Published 6 years ago
react-native-fluid-slider v1.0.2
About
Our company provides custom UI design and development solutions for mobile applications and websites.
Need a team to create a project?
This project is developed and maintained by openGeeksLab LLC.
react-native-fluid-slider
Requirements
- React Native 0.50+
- iOS 9.0+
- Android 4.2+
Installation
Just run:
- npm i @opengeekslab/react-native-fluid-slider
Basic usage
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import Slider from '@opengeekslab/react-native-fluid-slider';
export default class App extends Component {
state = { value: 40 }
render() {
return (
<View style={styles.container}>
<View style={styles.sliderContainer}>
<Text style={styles.valueText}>
{this.state.value.toFixed()}
</Text>
<Slider
value={this.state.value}
onValueChange={value => this.setState({ value })}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#000',
paddingHorizontal: 70,
},
sliderContainer: {
width: '100%',
},
valueText: {
fontSize: 40,
textAlign: 'center',
margin: 10,
color: '#ee6d51',
},
});
Properties
value
- is the value of the slider.
step
- is the slider step.
minimumValue
- is the minimum value.
maximumValue
- is the maximum value.
onValueChange
- it is called when the value of the slider is changed and getting the new slider value parameter.
thumbTintColor
- is the slider color.
minimumTrackTintColor
- is the color of the slider track on the left of the slider.
maximumTrackTintColor
- is the color of the slider track on the right of the slider.
Contact us if interested.
Licence
Expanding is released under the MIT license.