From 36d36d126b1e2d146aa491909664e23b22bd9f29 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <eps1lon@users.noreply.github.com>
Date: Sat, 25 Aug 2018 21:06:46 +0200
Subject: [PATCH] [Slider] fix transitions (#12531)

Fixes track behavior when slider was focused and values
were changed via arrow keys. The track used to outspace
the thumb.
---
 packages/material-ui-lab/src/Slider/Slider.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 6371a2f38bdc3b..8b9a878551eaac 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -14,10 +14,13 @@ export const styles = theme => {
     easing: theme.transitions.easing.easeOut,
   };
 
-  const commonTransitionsProperty = ['width', 'height', 'box-shadow', 'left', 'top'];
-
   const commonTransitions = theme.transitions.create(
-    commonTransitionsProperty,
+    ['width', 'height', 'left', 'top', 'box-shadow'],
+    commonTransitionsOptions,
+  );
+  // no transition on the position
+  const thumbActivatedTransitions = theme.transitions.create(
+    ['width', 'height', 'box-shadow'],
     commonTransitionsOptions,
   );
 
@@ -62,7 +65,7 @@ export const styles = theme => {
       top: '50%',
       height: 2,
       backgroundColor: colors.primary,
-      '&$focused, &$activated': {
+      '&$activated': {
         transition: 'none',
       },
       '&$disabled': {
@@ -106,7 +109,7 @@ export const styles = theme => {
       '&$activated': {
         width: 17,
         height: 17,
-        transition: 'none',
+        transition: thumbActivatedTransitions,
       },
       '&$disabled': {
         cursor: 'no-drop',