[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>

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>
+ );
+}