Merge pull request #4571 from lwansbrough/vertical-slider

[Slider] Add support for vertical/reversible sliders

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import Slider from 'material-ui/Slider';
+
+/**
+ * The orientation of the slider can be reversed and rotated using the `axis` prop.
+ */
+const SliderExampleAxis = () => (
+  <div style={{display: 'flex', height: 124, flexDirection: 'row', justifyContent: 'space-around'}}>
+    <Slider style={{height: 100}} axis="y" defaultValue={0.5} />
+    <Slider style={{width: 200}} axis="x-reverse" />
+    <Slider style={{height: 100}} axis="y-reverse" defaultValue={1} />
+  </div>
+);
+
+export default SliderExampleAxis;

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import Slider from 'material-ui/Slider';
 
+/**
+ * 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.
+ */
 export default class SliderExampleControlled extends React.Component {
 
   state = {

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import Slider from 'material-ui/Slider';
 
+/**
+ * The `defaultValue` property sets the initial position of the slider. The slider
+ * appearance changes when not at the starting position.
+ */
 const SliderExampleSimple = () => (
   <div>
     <Slider />

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import Slider from 'material-ui/Slider';
 
+/**
+ * By default, the slider is continuous. The `step` property causes the slider to move in discrete increments.
+ */
 const SliderExampleStep = () => (
   <Slider step={0.10} value={.5} />
 );

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

@@ -14,24 +14,16 @@ import SliderExampleStep from './ExampleStep';
 import sliderExampleStepCode from '!raw!./ExampleStep';
 import SliderExampleControlled from './ExampleControlled';
 import sliderExampleControlledCode from '!raw!./ExampleControlled';
+import SliderExampleAxis from './ExampleAxis';
+import sliderExampleAxisCode from '!raw!./ExampleAxis';
 import sliderCode from '!raw!material-ui/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 = () => (
   <div>
     <Title render={(previousTitle) => `Slider - ${previousTitle}`} />
     <MarkdownElement text={sliderReadmeText} />
     <CodeExample
       title="Simple examples"
-      description={descriptions.simple}
       code={sliderExampleSimpleCode}
     >
       <SliderExampleSimple />
@@ -44,19 +36,24 @@ const SliderPage = () => (
     </CodeExample>
     <CodeExample
       title="Stepped example"
-      description={descriptions.stepped}
       code={sliderExampleStepCode}
     >
       <SliderExampleStep />
     </CodeExample>
     <CodeExample
       title="Controlled Examples"
-      description={descriptions.value}
       code={sliderExampleControlledCode}
     >
       <SliderExampleControlled />
     </CodeExample>
 
+    <CodeExample
+      title="Alternative Axis Examples"
+      code={sliderExampleAxisCode}
+    >
+      <SliderExampleAxis />
+    </CodeExample>
+
     <PropTypeDescription code={sliderCode} />
   </div>
 );