diff --git a/docs/src/app/components/pages/components/Slider/ExampleControlled.js b/docs/src/app/components/pages/components/Slider/ExampleControlled.js new file mode 100644 index 00000000000000..114f0f90aced1c --- /dev/null +++ b/docs/src/app/components/pages/components/Slider/ExampleControlled.js @@ -0,0 +1,49 @@ +import React from 'react'; +import Slider from 'material-ui/Slider'; + +export default class SliderExampleControlled extends React.Component { + + state = { + firstSlider: 0.5, + secondSlider: 50, + } + + handleFirstSlider(event, value) { + this.setState({firstSlider: value}); + } + + handleSecondSlider(event, value) { + this.setState({secondSlider: value}); + } + + render() { + return ( +
+ +

+ {'The value of this slider is: '} + {this.state.firstSlider} + {' from a range of 0 to 1 inclusive'} +

+ +

+ {'The value of this slider is: '} + {this.state.secondSlider} + {' from a range of 0 to 100 inclusive'} +

+
+ ); + } + +} diff --git a/docs/src/app/components/pages/components/Slider/Page.js b/docs/src/app/components/pages/components/Slider/Page.js index 847f0627d91e6d..030cc541a74948 100644 --- a/docs/src/app/components/pages/components/Slider/Page.js +++ b/docs/src/app/components/pages/components/Slider/Page.js @@ -12,6 +12,8 @@ import SliderExampleDisabled from './ExampleDisabled'; import sliderExampleDisabledCode from '!raw!./ExampleDisabled'; import SliderExampleStep from './ExampleStep'; import sliderExampleStepCode from '!raw!./ExampleStep'; +import SliderExampleControlled from './ExampleControlled'; +import sliderExampleControlledCode from '!raw!./ExampleControlled'; import sliderCode from '!raw!material-ui/lib/Slider/Slider'; const descriptions = { @@ -19,6 +21,8 @@ const descriptions = { 'not at the starting position.', stepped: 'By default, the slider is continuous. The `step` property causes the slider to move in discrete ' + 'increments.', + value: 'The slider bar can have a set minimum and maximum, and the value can be ' + + 'obtained through the value parameter fired on an onChange event.', }; const SliderPage = () => ( @@ -45,6 +49,14 @@ const SliderPage = () => ( > + + + + );