[Slider] Major upgrade (#15703)

* [Slider] Major upgrade

* ThumbLabel.js => ValueLabel.js

* increase spacing in the demo

* fix vertical rtl

* change default value of valueLabelDisplay

* Update packages/material-ui-lab/src/Slider/Slider.js

Co-Authored-By: Matt <github@nospam.33m.co>

* Fix empty input slider

* Sebastian review

Co-Authored-By: Sebastian Silbermann <silbermann.sebastian@gmail.com>

* Improve focus-visible logic

* Update docs/src/pages/components/slider/slider.md

Co-Authored-By: Josh Wooding <12938082+joshwooding@users.noreply.github.com>

Author: oliviertassinari

docs/src/pages/components/slider/ContinuousSlider.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/Slider';
+import VolumeDown from '@material-ui/icons/VolumeDown';
+import VolumeUp from '@material-ui/icons/VolumeUp';
+
+const useStyles = makeStyles({
+  root: {
+    width: 200,
+  },
+});
+
+export default function ContinuousSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(30);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="continuous-slider" gutterBottom>
+        Volume
+      </Typography>
+      <Grid container spacing={2}>
+        <Grid item>
+          <VolumeDown />
+        </Grid>
+        <Grid item xs>
+          <Slider value={value} onChange={handleChange} aria-labelledby="continuous-slider" />
+        </Grid>
+        <Grid item>
+          <VolumeUp />
+        </Grid>
+      </Grid>
+      <Slider disabled defaultValue={30} aria-labelledby="continuous-slider" />
+    </div>
+  );
+}

docs/src/pages/components/slider/ContinuousSlider.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Slider from '@material-ui/lab/Slider';
+import VolumeDown from '@material-ui/icons/VolumeDown';
+import VolumeUp from '@material-ui/icons/VolumeUp';
+
+const useStyles = makeStyles({
+  root: {
+    width: 200,
+  },
+});
+
+export default function ContinuousSlider() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState<number | number[]>(30);
+
+  const handleChange = (event: any, newValue: number | number[]) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Typography id="continuous-slider" gutterBottom>
+        Volume
+      </Typography>
+      <Grid container spacing={2}>
+        <Grid item>
+          <VolumeDown />
+        </Grid>
+        <Grid item xs>
+          <Slider value={value} onChange={handleChange} aria-labelledby="continuous-slider" />
+        </Grid>
+        <Grid item>
+          <VolumeUp />
+        </Grid>
+      </Grid>
+      <Slider disabled defaultValue={30} aria-labelledby="continuous-slider" />
+    </div>
+  );
+}