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