[Slider] Add example showing how to access value

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 (
+      <div>
+        <Slider
+          defaultValue={0.5}
+          value={this.state.firstSlider}
+          onChange={this.handleFirstSlider.bind(this)}
+        />
+        <p>
+          <span>{'The value of this slider is: '}</span>
+          <span>{this.state.firstSlider}</span>
+          <span>{' from a range of 0 to 1 inclusive'}</span>
+        </p>
+        <Slider
+          min={0}
+          max={100}
+          step={1}
+          defaultValue={50}
+          value={this.state.secondSlider}
+          onChange={this.handleSecondSlider.bind(this)}
+        />
+        <p>
+          <span>{'The value of this slider is: '}</span>
+          <span>{this.state.secondSlider}</span>
+          <span>{' from a range of 0 to 100 inclusive'}</span>
+        </p>
+      </div>
+    );
+  }
+
+}

docs/src/app/components/pages/components/Slider/Page.js

@@ -12,13 +12,17 @@ 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 = {
   simple: 'The `defaultValue` property sets the initial position of the slider. The slider appearance changes when ' +
   '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 = () => (
     >
       <SliderExampleStep />
     </CodeExample>
+    <CodeExample
+      title="Controlled Examples"
+      description={descriptions.value}
+      code={sliderExampleControlledCode}
+    >
+      <SliderExampleControlled />
+    </CodeExample>
+
     <PropTypeDescription code={sliderCode} />
   </div>
 );