diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html
index 624cbd78b3f2..729ec80a992b 100644
--- a/src/demo-app/slider/slider-demo.html
+++ b/src/demo-app/slider/slider-demo.html
@@ -53,6 +53,11 @@
Inverted vertical slider
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 ace527ba1b4c..8ffb2eb5deb0 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