feat(slider): add focus and blur methods do MatSlider (#9373)

Author: julianobrasil

src/demo-app/slider/slider-demo.html

@@ -53,6 +53,11 @@ <h1>Inverted vertical slider</h1>
            aria-label="Inverted vertical slider">
 </mat-slider>
 
+<h1>Set/lost focus to show thumblabel programmatically</h1>
+<mat-slider #demoSlider="matSlider" thumbLabel aria-label="Slider with thumb label"></mat-slider>
+<button (click)="demoSlider.focus()">Focus Slider</button>
+<button (click)="demoSlider.blur()">Blur Slider</button>
+
 <mat-tab-group>
   <mat-tab label="One">
     <mat-slider min="1" max="5" value="3" aria-label="Slider in a tab"></mat-slider>

src/lib/slider/slider.ts

@@ -267,6 +267,16 @@ export class MatSlider extends _MatSliderMixinBase
     return this.value || 0;
   }
 
+  /** set focus to the host element */
+  focus() {
+    this._focusHostElement();
+  }
+
+  /** blur the host element */
+  blur() {
+    this._blurHostElement();
+  }
+
   /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
   onTouched: () => any = () => {};
 
@@ -691,6 +701,11 @@ export class MatSlider extends _MatSliderMixinBase
     this._elementRef.nativeElement.focus();
   }
 
+  /** Blurs the native element. */
+  private _blurHostElement() {
+    this._elementRef.nativeElement.blur();
+  }
+
   /**
    * Sets the model value. Implemented as part of ControlValueAccessor.
    * @param value