[Slider] Fix thumb outline not matching spec

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

@@ -9,6 +9,9 @@ const styles = {
   root: {
     width: 300,
   },
+  slider: {
+    padding: '22px 0px',
+  },
   thumbIcon: {
     borderRadius: '50%',
   },
@@ -34,6 +37,7 @@ class CustomIconSlider extends React.Component {
       <div className={classes.root}>
         <Typography id="slider-image">Image thumb</Typography>
         <Slider
+          className={classes.slider}
           value={value}
           aria-labelledby="slider-image"
           onChange={this.handleChange}
@@ -47,6 +51,7 @@ class CustomIconSlider extends React.Component {
         />
         <Typography id="slider-icon">Icon thumb</Typography>
         <Slider
+          className={classes.slider}
           value={value}
           aria-labelledby="slider-icon"
           onChange={this.handleChange}

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

@@ -7,16 +7,19 @@ const styles = {
   root: {
     width: 300,
   },
+  slider: {
+    padding: '8px 0px',
+  },
 };
 
 function DisabledSlider(props) {
   const { classes } = props;
 
   return (
     <div className={classes.root}>
-      <Slider value={0} disabled />
-      <Slider value={50} disabled />
-      <Slider value={100} disabled />
+      <Slider className={classes.slider} value={0} disabled />
+      <Slider className={classes.slider} value={50} disabled />
+      <Slider className={classes.slider} value={100} disabled />
     </div>
   );
 }

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

@@ -8,6 +8,9 @@ const styles = {
   root: {
     width: 300,
   },
+  slider: {
+    padding: '22px 0px',
+  },
 };
 
 class SimpleSlider extends React.Component {
@@ -26,7 +29,12 @@ class SimpleSlider extends React.Component {
     return (
       <div className={classes.root}>
         <Typography id="label">Slider label</Typography>
-        <Slider value={value} aria-labelledby="label" onChange={this.handleChange} />
+        <Slider
+          className={classes.slider}
+          value={value}
+          aria-labelledby="label"
+          onChange={this.handleChange}
+        />
       </div>
     );
   }

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

@@ -7,6 +7,9 @@ const styles = {
   root: {
     width: 300,
   },
+  slider: {
+    padding: '22px 0px',
+  },
 };
 
 class StepSlider extends React.Component {
@@ -24,7 +27,14 @@ class StepSlider extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Slider value={value} min={0} max={6} step={1} onChange={this.handleChange} />
+        <Slider
+          className={classes.slider}
+          value={value}
+          min={0}
+          max={6}
+          step={1}
+          onChange={this.handleChange}
+        />
       </div>
     );
   }

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

@@ -8,6 +8,9 @@ const styles = {
     display: 'flex',
     height: 300,
   },
+  slider: {
+    padding: '0px 22px',
+  },
 };
 
 class VerticalSlider extends React.Component {

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

@@ -14,7 +14,8 @@ export const styles = theme => {
     easing: theme.transitions.easing.easeOut,
   };
 
-  const commonTransitions = theme.transitions.create(
+  const trackTransitions = theme.transitions.create(['width', 'height'], commonTransitionsOptions);
+  const thumbCommonTransitions = theme.transitions.create(
     ['width', 'height', 'left', 'right', 'top', 'box-shadow'],
     commonTransitionsOptions,
   );
@@ -27,22 +28,27 @@ export const styles = theme => {
   const colors = {
     primary: theme.palette.primary.main,
     disabled: theme.palette.grey[400],
+    thumbOutline: fade(theme.palette.primary.main, 0.16),
   };
 
+  /**
+   * radius of the box-shadow when pressed
+   * hover should have a diameter equal to the pressed radius
+   */
+  const pressedOutlineRadius = 9;
+
   return {
     /* Styles applied to the root element. */
     root: {
       position: 'relative',
       width: '100%',
-      padding: '16px 8px',
       cursor: 'pointer',
       WebkitTapHighlightColor: 'transparent',
       '&$disabled': {
         cursor: 'no-drop',
       },
       '&$vertical': {
         height: '100%',
-        padding: '8px 16px',
       },
     },
     /* Styles applied to the container element. */
@@ -64,6 +70,7 @@ export const styles = theme => {
       },
       '&$disabled': {
         backgroundColor: colors.disabled,
+        boxShadow: 'none',
       },
       '&$vertical': {
         transform: 'translate(-50%, 0)',
@@ -76,13 +83,13 @@ export const styles = theme => {
     trackBefore: {
       zIndex: 1,
       left: 0,
-      transition: commonTransitions,
+      transition: trackTransitions,
     },
     /* Styles applied to the track element after the thumb. */
     trackAfter: {
       right: 0,
       opacity: 0.24,
-      transition: commonTransitions,
+      transition: trackTransitions,
       '&$vertical': {
         bottom: 0,
       },
@@ -95,14 +102,13 @@ export const styles = theme => {
       width: 12,
       height: 12,
       borderRadius: '50%',
-      transition: commonTransitions,
+      transition: thumbCommonTransitions,
       backgroundColor: colors.primary,
-      '&$focused': {
-        boxShadow: `0px 0px 0px 9px ${fade(colors.primary, 0.16)}`,
+      '&$focused, &:hover': {
+        boxShadow: `0px 0px 0px ${pressedOutlineRadius}px ${colors.thumbOutline}`,
       },
       '&$activated': {
-        width: 17,
-        height: 17,
+        boxShadow: `0px 0px 0px ${pressedOutlineRadius * 2}px ${colors.thumbOutline}`,
         transition: thumbActivatedTransitions,
       },
       '&$disabled': {
@@ -112,8 +118,7 @@ export const styles = theme => {
         backgroundColor: colors.disabled,
       },
       '&$jumped': {
-        width: 17,
-        height: 17,
+        boxShadow: `0px 0px 0px ${pressedOutlineRadius * 2}px ${colors.thumbOutline}`,
       },
     },
     /* Class applied to the thumb element if custom thumb icon provided. */