diff --git a/Libraries/Components/Slider/Slider.js b/Libraries/Components/Slider/Slider.js index 61e76f6bd..91b780f7a 100644 --- a/Libraries/Components/Slider/Slider.js +++ b/Libraries/Components/Slider/Slider.js @@ -28,6 +28,63 @@ type Event = Object; /** * A component used to select a single value from a range of values. + * + * ### Usage + * + * The example below shows how to use `Slider` to change + * a value used by `Text`. The value is stored using + * the state of the root component (`App`). The same component + * subscribes to the `onValueChange` of `Slider` and changes + * the value using `setState`. + * + *``` + * import React from 'react'; + * import { StyleSheet, Text, View, Slider } from 'react-native'; + * + * export default class App extends React.Component { + * constructor(props) { + * super(props); + * this.state = { + * value: 50 + * } + * } + * + * change(value) { + * this.setState(() => { + * return { + * value: parseFloat(value) + * }; + * }); + * } + * + * render() { + * const {value} = this.state; + * return ( + * + * {String(value)} + * + * + * ); + * } + * } + * + * const styles = StyleSheet.create({ + * container: { + * flex: 1, + * flexDirection: 'column', + * justifyContent: 'center' + * }, + * text: { + * fontSize: 50, + * textAlign: 'center' + * } + * }); + *``` + * */ var Slider = createReactClass({ displayName: 'Slider',