diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html
index 624cbd78b3f..729ec80a992 100644
--- a/src/demo-app/slider/slider-demo.html
+++ b/src/demo-app/slider/slider-demo.html
@@ -53,6 +53,11 @@ Label
aria-label="Inverted vertical slider">
+
Set/lost focus to show thumblabel programmatically
+
+
+
+
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index 3fe3471b27a..1d68c0185cf 100644
--- a/src/lib/slider/slider.ts
+++ b/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