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 = () => (
>
+
+
+
+
);