[Slider] Lowest value for vertical should be at the bottom (#13090)

* [Slider] Lowest value for vertical should be at the bottom * [Slider] Fix lagging transition on vertical slider * [Slider] Fix thumb position on horizontal sliders * [docs] Document how to improve actionable area Document how to apply #11889 which was removed from default implementation in #12967.
mui · Oct 4, 2018 · 23d5d77 · 23d5d77
1 parent 6b3d12c
commit 23d5d77
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 21 deletions.
diff --git a/docs/src/pages/lab/slider/CustomIconSlider.js b/docs/src/pages/lab/slider/CustomIconSlider.js
@@ -37,7 +37,7 @@ class CustomIconSlider extends React.Component {
       <div className={classes.root}>
         <Typography id="slider-image">Image thumb</Typography>
         <Slider
-          className={classes.slider}
+          classes={{ container: classes.slider }}
           value={value}
           aria-labelledby="slider-image"
           onChange={this.handleChange}
@@ -51,11 +51,11 @@ 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}
           classes={{
+            container: classes.slider,
             thumbIconWrapper: classes.thumbIconWrapper,
           }}
           thumb={<LensIcon style={{ color: '#2196f3' }} />}

diff --git a/docs/src/pages/lab/slider/DisabledSlider.js b/docs/src/pages/lab/slider/DisabledSlider.js
@@ -17,9 +17,9 @@ function DisabledSlider(props) {
 
   return (
     <div className={classes.root}>
-      <Slider className={classes.slider} value={0} disabled />
-      <Slider className={classes.slider} value={50} disabled />
-      <Slider className={classes.slider} value={100} disabled />
+      <Slider classes={{ container: classes.slider }} value={0} disabled />
+      <Slider classes={{ container: classes.slider }} value={50} disabled />
+      <Slider classes={{ container: classes.slider }} value={100} disabled />
     </div>
   );
 }

diff --git a/docs/src/pages/lab/slider/SimpleSlider.js b/docs/src/pages/lab/slider/SimpleSlider.js
@@ -30,7 +30,7 @@ class SimpleSlider extends React.Component {
       <div className={classes.root}>
         <Typography id="label">Slider label</Typography>
         <Slider
-          className={classes.slider}
+          classes={{ container: classes.slider }}
           value={value}
           aria-labelledby="label"
           onChange={this.handleChange}

diff --git a/docs/src/pages/lab/slider/StepSlider.js b/docs/src/pages/lab/slider/StepSlider.js
@@ -28,7 +28,7 @@ class StepSlider extends React.Component {
     return (
       <div className={classes.root}>
         <Slider
-          className={classes.slider}
+          classes={{ container: classes.slider }}
           value={value}
           min={0}
           max={6}

diff --git a/docs/src/pages/lab/slider/VerticalSlider.js b/docs/src/pages/lab/slider/VerticalSlider.js
@@ -28,7 +28,12 @@ class VerticalSlider extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Slider value={value} onChange={this.handleChange} vertical />
+        <Slider
+          classes={{ container: classes.slider }}
+          value={value}
+          onChange={this.handleChange}
+          vertical
+        />
       </div>
     );
   }

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
@@ -16,7 +16,7 @@ export const styles = theme => {
 
   const trackTransitions = theme.transitions.create(['width', 'height'], commonTransitionsOptions);
   const thumbCommonTransitions = theme.transitions.create(
-    ['width', 'height', 'left', 'right', 'top', 'box-shadow'],
+    ['width', 'height', 'left', 'right', 'bottom', 'box-shadow'],
     commonTransitionsOptions,
   );
   // no transition on the position
@@ -76,6 +76,7 @@ export const styles = theme => {
         transform: 'translate(-50%, 0)',
         left: '50%',
         top: 'initial',
+        bottom: 0,
         width: 2,
       },
     },
@@ -120,6 +121,9 @@ export const styles = theme => {
       '&$jumped': {
         boxShadow: `0px 0px 0px ${pressedOutlineRadius * 2}px ${colors.thumbOutline}`,
       },
+      '&$vertical': {
+        transform: 'translate(-50%, +50%)',
+      },
     },
     /* Class applied to the thumb element if custom thumb icon provided. */
     thumbIconWrapper: {
@@ -152,10 +156,10 @@ function roundToStep(number, step) {
 
 function getOffset(node) {
   const { pageYOffset, pageXOffset } = global;
-  const { left, top } = node.getBoundingClientRect();
+  const { left, bottom } = node.getBoundingClientRect();
 
   return {
-    top: top + pageYOffset,
+    bottom: bottom + pageYOffset,
     left: left + pageXOffset,
   };
 }
@@ -176,10 +180,10 @@ function getMousePosition(event) {
 
 function calculatePercent(node, event, isVertical, isRtl) {
   const { width, height } = node.getBoundingClientRect();
-  const { top, left } = getOffset(node);
+  const { bottom, left } = getOffset(node);
   const { x, y } = getMousePosition(event);
 
-  const value = isVertical ? y - top : x - left;
+  const value = isVertical ? bottom - y : x - left;
   const onePercent = (isVertical ? height : width) / 100;
 
   return isRtl && !isVertical ? 100 - clamp(value / onePercent) : clamp(value / onePercent);
@@ -413,6 +417,7 @@ class Slider extends React.Component {
       [classes.jumped]: !disabled && currentState === 'jumped',
       [classes.focused]: !disabled && currentState === 'focused',
       [classes.activated]: !disabled && currentState === 'activated',
+      [classes.vertical]: vertical,
     };
 
     const className = classNames(
@@ -428,17 +433,12 @@ class Slider extends React.Component {
       [classes.vertical]: vertical,
     });
 
-    const trackBeforeClasses = classNames(classes.track, classes.trackBefore, commonClasses, {
-      [classes.vertical]: vertical,
-    });
-
-    const trackAfterClasses = classNames(classes.track, classes.trackAfter, commonClasses, {
-      [classes.vertical]: vertical,
-    });
+    const trackBeforeClasses = classNames(classes.track, classes.trackBefore, commonClasses);
+    const trackAfterClasses = classNames(classes.track, classes.trackAfter, commonClasses);
 
     const trackProperty = vertical ? 'height' : 'width';
     const horizontalMinimumPosition = theme.direction === 'ltr' ? 'left' : 'right';
-    const thumbProperty = vertical ? 'top' : horizontalMinimumPosition;
+    const thumbProperty = vertical ? 'bottom' : horizontalMinimumPosition;
     const inlineTrackBeforeStyles = { [trackProperty]: this.calculateTrackBeforeStyles(percent) };
     const inlineTrackAfterStyles = { [trackProperty]: this.calculateTrackAfterStyles(percent) };
     const inlineThumbStyles = { [thumbProperty]: `${percent}%` };