[Slider] Major upgrade

Author: oliviertassinari

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

@@ -0,0 +1,37 @@
+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();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="continuous-slider" gutterBottom>
+        Volume
+      </Typography>
+      <Grid container spacing={2}>
+        <Grid item>
+          <VolumeDown />
+        </Grid>
+        <Grid item xs>
+          <Slider defaultValue={30} thumbLabelDisplay="off" 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,37 @@
+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();
+
+  return (
+    <div className={classes.root}>
+      <Typography id="continuous-slider" gutterBottom>
+        Volume
+      </Typography>
+      <Grid container spacing={2}>
+        <Grid item>
+          <VolumeDown />
+        </Grid>
+        <Grid item xs>
+          <Slider defaultValue={30} thumbLabelDisplay="off" aria-labelledby="continuous-slider" />
+        </Grid>
+        <Grid item>
+          <VolumeUp />
+        </Grid>
+      </Grid>
+      <Slider disabled defaultValue={30} aria-labelledby="continuous-slider" />
+    </div>
+  );
+}

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Slider from '@material-ui/lab/Slider';
 import { fade } from '@material-ui/core/styles/colorManipulator';
+import Tooltip from '@material-ui/core/Tooltip';
 
 const useStyles = makeStyles({
   root: {
@@ -11,45 +13,72 @@ const useStyles = makeStyles({
   },
 });
 
+function ThumbLabelComponent(props) {
+  const { children, value } = props;
+
+  const popperRef = React.useRef(null);
+  React.useEffect(() => {
+    if (popperRef.current) {
+      popperRef.current.update();
+    }
+  });
+
+  return (
+    <Tooltip
+      PopperProps={{
+        popperRef,
+      }}
+      enterTouchDelay={0}
+      placement="top"
+      title={value}
+    >
+      {children}
+    </Tooltip>
+  );
+}
+
+ThumbLabelComponent.propTypes = {
+  children: PropTypes.element.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
 const StyledSlider = withStyles({
+  root: {
+    color: '#de235b',
+    height: 8,
+  },
   thumb: {
     height: 24,
     width: 24,
     backgroundColor: '#fff',
     border: '2px solid #de235b',
-    '&$focused, &:hover': {
-      boxShadow: `0px 0px 0px ${8}px ${fade('#de235b', 0.16)}`,
-    },
-    '&$activated': {
-      boxShadow: `0px 0px 0px ${8 * 1.5}px ${fade('#de235b', 0.16)}`,
+    marginTop: -8,
+    marginLeft: -12,
+    '&:focus,&:hover': {
+      boxShadow: `0px 0px 0px 8px ${fade('#de235b', 0.16)}`,
     },
-    '&$jumped': {
-      boxShadow: `0px 0px 0px ${8 * 1.5}px ${fade('#de235b', 0.16)}`,
+    '&:active:focus': {
+      boxShadow: `0px 0px 0px 14px ${fade('#de235b', 0.16)}`,
     },
   },
+  thumbLabel: {
+    left: 'calc(-50% + 4px)',
+  },
   track: {
-    backgroundColor: '#de235b',
     height: 8,
   },
-  trackAfter: {
-    backgroundColor: '#d0d7dc',
+  rail: {
+    height: 8,
   },
-  focused: {},
-  activated: {},
-  jumped: {},
 })(Slider);
 
 function CustomizedSlider() {
   const classes = useStyles();
-  const [value, setValue] = React.useState(50);
-
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
 
   return (
     <Paper className={classes.root}>
-      <StyledSlider value={value} aria-labelledby="label" onChange={handleChange} />
+      <StyledSlider aria-label="Random" defaultValue={20} />
+      <Slider ThumbLabelComponent={ThumbLabelComponent} aria-label="Random" defaultValue={20} />
     </Paper>
   );
 }