Skip to content

Commit ec50aa6

Browse files
Adriano Melofacebook-github-bot
authored andcommitted
Docs: Improve documentation of Slider (add example)
Summary: It would be great to have examples in the documentation of all components. I have created a PR to add an example for `CheckBox`, and now I am adding an example for the `Slider` component. The PR changes documentation. No further test is required. [DOCS][ENHANCEMENT][Slider] - Added example to documentation Closes facebook#16588 Differential Revision: D6197329 Pulled By: hramos fbshipit-source-id: 91d1b20fc2d4bae15f9706ac4c155411d91af290
1 parent dc207ec commit ec50aa6

File tree

1 file changed

+57
-0
lines changed

1 file changed

+57
-0
lines changed

Libraries/Components/Slider/Slider.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,63 @@ type Event = Object;
2828

2929
/**
3030
* A component used to select a single value from a range of values.
31+
*
32+
* ### Usage
33+
*
34+
* The example below shows how to use `Slider` to change
35+
* a value used by `Text`. The value is stored using
36+
* the state of the root component (`App`). The same component
37+
* subscribes to the `onValueChange` of `Slider` and changes
38+
* the value using `setState`.
39+
*
40+
*```
41+
* import React from 'react';
42+
* import { StyleSheet, Text, View, Slider } from 'react-native';
43+
*
44+
* export default class App extends React.Component {
45+
* constructor(props) {
46+
* super(props);
47+
* this.state = {
48+
* value: 50
49+
* }
50+
* }
51+
*
52+
* change(value) {
53+
* this.setState(() => {
54+
* return {
55+
* value: parseFloat(value)
56+
* };
57+
* });
58+
* }
59+
*
60+
* render() {
61+
* const {value} = this.state;
62+
* return (
63+
* <View style={styles.container}>
64+
* <Text style={styles.text}>{String(value)}</Text>
65+
* <Slider
66+
* step={1}
67+
* maximumValue={100}
68+
* onValueChange={this.change.bind(this)}
69+
* value={value} />
70+
* </View>
71+
* );
72+
* }
73+
* }
74+
*
75+
* const styles = StyleSheet.create({
76+
* container: {
77+
* flex: 1,
78+
* flexDirection: 'column',
79+
* justifyContent: 'center'
80+
* },
81+
* text: {
82+
* fontSize: 50,
83+
* textAlign: 'center'
84+
* }
85+
* });
86+
*```
87+
*
3188
*/
3289
var Slider = createReactClass({
3390
displayName: 'Slider',

0 commit comments

Comments
 (0)