[Slider] Port component (#11040)

docs/src/modules/components/withRoot.js

@@ -186,6 +186,9 @@ const pages = [
       {
         pathname: '/lab/speed-dial',
       },
+      {
+        pathname: '/lab/slider',
+      },
       findPages[2].children[1],
     ],
   },

docs/src/pages/getting-started/supported-components/supported-components.md

@@ -80,9 +80,10 @@ to discuss the approach before submitting a PR.
   - **[Checkbox](https://material.io/design/components/selection-controls.html#checkboxes) ✓**
   - **[Radio button](https://material.io/design/components/selection-controls.html#radio-buttons) ✓**
   - **[Switch](https://material.io/design/components/selection-controls.html#switches) ✓**
-- [Sliders](https://material.io/design/components/sliders.html)
-  - [Continuous](https://material.io/design/components/sliders.html#continuous-slider)
-  - [Discrete](https://material.io/design/components/sliders.html#discrete-slider)
+- **[Sliders](https://material.io/design/components/sliders.html) ~
+     **([Lab](/lab/about))
+  - **[Continuous](https://material.io/design/components/sliders.html#continuous-slider) ✓**
+  - **[Discrete](https://material.io/design/components/sliders.html#discrete-slider) ~** (WIP)
 - **[Snackbars](https://material.io/archive/guidelines/components/snackbars-toasts.html) ✓** (*Legacy Material v1*)
 - **[Subheaders](https://material.io/archive/guidelines/components/subheaders.html) ✓** (*Legacy Material v1*)
   - **[List](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓**

docs/src/pages/lab/slider/DisabledSlider.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Slider from '@material-ui/lab/Slider';
+
+const styles = {
+  container: {
+    width: 300,
+  },
+};
+
+function DisabledSlider({ classes }) {
+  return (
+    <div className={classes.container}>
+      <Slider value={0} disabled />
+      <Slider value={50} disabled />
+      <Slider value={100} disabled />
+    </div>
+  );
+}
+
+DisabledSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(DisabledSlider);

docs/src/pages/lab/slider/ReverseSlider.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Slider from '@material-ui/lab/Slider';
+
+const styles = {
+  container: {
+    width: 300,
+  },
+};
+
+class ReverseSlider extends React.Component {
+  state = { value: 50 };
+
+  handleChange = (event, value) => this.setState({ value });
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div className={classes.container}>
+        <Slider value={value} onChange={this.handleChange} />
+        <Slider value={value} onChange={this.handleChange} reverse />
+      </div>
+    );
+  }
+}
+
+ReverseSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ReverseSlider);

docs/src/pages/lab/slider/SimpleSlider.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Typography from 'material-ui/Typography';
+import Slider from '@material-ui/lab/Slider';
+
+const styles = {
+  container: {
+    width: 300,
+  },
+};
+
+class SimpleSlider extends React.Component {
+  state = { value: 50 };
+
+  handleChange = (event, value) => this.setState({ value });
+
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div className={classes.container}>
+        <Typography id="label">Slider label</Typography>
+        <Slider value={value} aria-labelledby="label" onChange={this.handleChange} />
+      </div>
+    );
+  }
+}
+
+SimpleSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleSlider);

docs/src/pages/lab/slider/StepSlider.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Slider from '@material-ui/lab/Slider';
+
+const styles = {
+  container: {
+    width: 300,
+  },
+};
+
+class StepSlider extends React.Component {
+  state = { value: 3 };
+
+  handleChange = (event, value) => this.setState({ value });
+
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div className={classes.container}>
+        <Slider value={value} min={0} max={6} step={1} onChange={this.handleChange} />
+      </div>
+    );
+  }
+}
+
+StepSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(StepSlider);

docs/src/pages/lab/slider/VerticalSlider.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Slider from '@material-ui/lab/Slider';
+
+const styles = {
+  container: {
+    display: 'flex',
+    height: 300,
+  },
+};
+
+class VerticalSlider extends React.Component {
+  state = { value: 50 };
+  handleChange = (event, value) => this.setState({ value });
+  render() {
+    const { classes } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div className={classes.container}>
+        <Slider value={value} onChange={this.handleChange} vertical />
+        <Slider value={value} onChange={this.handleChange} vertical reverse />
+      </div>
+    );
+  }
+}
+
+VerticalSlider.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(VerticalSlider);

docs/src/pages/lab/slider/slider.md

@@ -0,0 +1,22 @@
+---
+components: Slider
+---
+
+# Slider
+
+A [slider](https://material.io/guidelines/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.
+
+## Simple slider
+{{"demo": "pages/lab/slider/SimpleSlider.js"}}
+
+## Slider with steps
+{{"demo": "pages/lab/slider/StepSlider.js"}}
+
+## Disabled slider
+{{"demo": "pages/lab/slider/DisabledSlider.js"}}
+
+## Vertical slider
+{{"demo": "pages/lab/slider/VerticalSlider.js"}}
+
+## Reverse slider
+{{"demo": "pages/lab/slider/ReverseSlider.js"}}