Update Documentation for Sliders

docs/src/app/app-routes.jsx

@@ -41,7 +41,7 @@ import Popover from './components/pages/components/popover';
 import Progress from './components/pages/components/progress';
 import RefreshIndicatorPage from './components/pages/components/RefreshIndicator/Page';
 import SelectField from './components/pages/components/SelectField/Page';
-import Sliders from './components/pages/components/sliders';
+import SliderPage from './components/pages/components/Slider/Page';
 import SnackbarPage from './components/pages/components/Snackbar/Page';
 import SvgIconPage from './components/pages/components/SvgIcon/Page';
 import Switches from './components/pages/components/switches';
@@ -103,8 +103,8 @@ const AppRoutes = (
       <Route path="progress" component={Progress} />
       <Route path="refresh-indicator" component={RefreshIndicatorPage} />
       <Route path="select-field" component={SelectField} />
-      <Route path="sliders" component={Sliders} />
       <Route path="svg-icon" component={SvgIconPage} />
+      <Route path="slider" component={SliderPage} />
       <Route path="switches" component={Switches} />
       <Route path="snackbar" component={SnackbarPage} />
       <Route path="table" component={Table} />

docs/src/app/components/app-left-nav.jsx

@@ -238,8 +238,8 @@ const AppLeftNav = React.createClass({
                 primaryText="Select Field"
               />,
               <ListItem
-                value="/components/sliders"
-                primaryText="Sliders"
+                value="/components/slider"
+                primaryText="Slider"
               />,
               <ListItem
                 value="/components/switches"

docs/src/app/components/pages/components/Slider/ExampleDisabled.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Slider from 'material-ui/lib/slider';
+
+const SliderExampleDisabled = () => (
+  <div>
+    <Slider name="slider1" disabled={true} />
+    <Slider name="slider2" disabled={true} value={0.5} />
+    <Slider name="slider3" disabled={true} value={1} />
+  </div>
+);
+
+export default SliderExampleDisabled;

docs/src/app/components/pages/components/Slider/ExampleSimple.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Slider from 'material-ui/lib/slider';
+
+const SliderExampleSimple = () => (
+  <div>
+    <Slider name="slider1" />
+    <Slider name="slider2" defaultValue={0.5} />
+    <Slider name="slider3" defaultValue={1}/>
+  </div>
+);
+
+export default SliderExampleSimple;

docs/src/app/components/pages/components/Slider/ExampleStep.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Slider from 'material-ui/lib/slider';
+
+const SliderExampleStep = () => (
+  <Slider name="slider1" step={0.10} value={.5}/>
+);
+
+export default SliderExampleStep;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import sliderReadmeText from './README';
+import sliderCode from '!raw!material-ui/lib/slider';
+import SliderExampleSimple from './ExampleSimple';
+import sliderExampleSimpleCode from '!raw!./ExampleSimple';
+import SliderExampleDisabled from './ExampleDisabled';
+import sliderExampleDisabledCode from '!raw!./ExampleDisabled';
+import SliderExampleStep from './ExampleStep';
+import sliderExampleStepCode from '!raw!./ExampleStep';
+
+const SliderPage = () => (
+  <div>
+    <MarkdownElement text={sliderReadmeText} />
+    <CodeExample code={sliderExampleSimpleCode}>
+      <SliderExampleSimple />
+    </CodeExample>
+    <CodeExample code={sliderExampleDisabledCode}>
+      <SliderExampleDisabled />
+    </CodeExample>
+    <CodeExample code={sliderExampleStepCode}>
+      <SliderExampleStep />
+    </CodeExample>
+    <PropTypeDescription code={sliderCode}/>
+  </div>
+);
+
+export default SliderPage;

docs/src/app/components/pages/components/Slider/README.md

@@ -0,0 +1,5 @@
+## Slider
+A [slider](https://www.google.com/design/spec/components/sliders.html)
+is an interface for users to input a value in a range. Sliders can be continuous
+or discrete and can be enabled or disabled.
+### Examples

src/slider.jsx

@@ -44,26 +44,92 @@ let valueInRangePropType = (props, propName, componentName) => {
 const Slider = React.createClass({
 
   propTypes: {
+    /**
+     * The default value of the slider.
+     **/
     defaultValue: valueInRangePropType,
+
+    /**
+     * Describe the slider.
+     **/
     description: React.PropTypes.string,
+
+    /**
+     * Disables focus ripple if set to true.
+     **/
     disableFocusRipple: React.PropTypes.bool,
+
+    /**
+     * If true, the slider will not be interactable.
+     **/
     disabled: React.PropTypes.bool,
+
+    /**
+     * An error message for the slider.
+     **/
     error: React.PropTypes.string,
+
+    /**
+     * The maximum value the slider can slide to on
+     * a scale from 0 to 1 inclusive. Cannot be equal to min.
+     **/
     max: minMaxPropType,
+
+    /**
+     * The minimum value the slider can slide to on a scale
+     * from 0 to 1 inclusive. Cannot be equal to max.
+     **/
     min: minMaxPropType,
-    name: React.PropTypes.string.isRequired,
+
+    /**
+     * The name of the slider. Behaves like the name attribute
+     * of an input element.
+     **/
+    name: React.PropTypes.string,
+
+    /**
+     * Callback function that is fired when the focus has left the slider.
+     **/
     onBlur: React.PropTypes.func,
+
+    /**
+     * Callback function that is fired when the user changes the slider's value.
+     **/
     onChange: React.PropTypes.func,
+
+    /**
+     * Callback function that is fired when the slider has begun to move.
+     **/
     onDragStart: React.PropTypes.func,
+
+    /**
+     * Callback function that is fried when teh slide has stopped moving.
+     **/
     onDragStop: React.PropTypes.func,
+
+    /**
+     * Callback fired when the user has focused on the slider.
+     **/
     onFocus: React.PropTypes.func,
+
+    /**
+     * Whether or not the slider is required in a form.
+     **/
     required: React.PropTypes.bool,
+
+    /**
+     * The granularity the slider can step through values.
+     **/
     step: React.PropTypes.number,
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * The value of the slider.
+     **/
     value: valueInRangePropType,
   },
 
@@ -83,6 +149,7 @@ const Slider = React.createClass({
   getDefaultProps() {
     return {
       disabled: false,
+      disableFocusRipple: false,
       max: 1,
       min: 0,
       required: true,