fix(material/slider): fix animation issue (#28704)

* the slider track animation would break in the case where
  a user clicks one thumb, tabs to the other, then uses an
  arrow key to change value.
* for some reason, this bug only happens when the slider is
  not discrete.

(cherry picked from commit 27cb903)

Author: wagnermaciel

src/material/slider/slider-input.ts

@@ -340,6 +340,8 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
   }
 
   _onFocus(): void {
+    this._slider._setTransition(false);
+    this._slider._updateTrackUI(this);
     this._setIsFocused(true);
   }
 

src/material/slider/slider-interface.ts

@@ -142,6 +142,9 @@ export interface _MatSlider {
   /** Updates the stored slider dimensions using the current bounding client rect. */
   _updateDimensions: () => void;
 
+  /** Updates the scale on the active portion of the track. */
+  _updateTrackUI: (source: _MatSliderThumb) => void;
+
   /** Used to set the transition duration for thumb and track animations. */
   _setTransition: (withAnimation: boolean) => void;