diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts index 5283903f42c2..ed6a5073cc70 100644 --- a/src/material-experimental/mdc-slider/slider.ts +++ b/src/material-experimental/mdc-slider/slider.ts @@ -80,7 +80,7 @@ export class MatSliderThumb implements AfterViewInit { /** The current value of this slider input. */ @Input() get value(): number { - return coerceNumberProperty(this._elementRef.nativeElement.getAttribute('value')); + return coerceNumberProperty(this._hostElement.getAttribute('value')); } set value(v: number) { const value = coerceNumberProperty(v); @@ -91,7 +91,7 @@ export class MatSliderThumb implements AfterViewInit { this._slider._setValue(value, this._thumbPosition); } else { // Setup for the MDC foundation. - this._elementRef.nativeElement.setAttribute('value', `${value}`); + this._hostElement.setAttribute('value', `${value}`); } } @@ -114,36 +114,41 @@ export class MatSliderThumb implements AfterViewInit { ? Thumb.START : Thumb.END; + /** The injected document if available or fallback to the global document reference. */ private _document: Document; + /** The host native HTML input element. */ + _hostElement: HTMLInputElement; + constructor( @Inject(DOCUMENT) document: any, private readonly _slider: MatSlider, - readonly _elementRef: ElementRef, + private readonly _elementRef: ElementRef, ) { this._document = document; + this._hostElement = _elementRef.nativeElement; // By calling this in the constructor we guarantee that the sibling sliders initial value by // has already been set by the time we reach ngAfterViewInit(). this._initializeInputValueAttribute(); } ngAfterViewInit() { - this._initializeInputMinMax(); + this._initializeInputState(); this._initializeInputValueProperty(); // Setup for the MDC foundation. if (this._slider.disabled) { - this._elementRef.nativeElement.disabled = true; + this._hostElement.disabled = true; } } /** Returns true if this slider input currently has focus. */ _isFocused(): boolean { - return this._document.activeElement === this._elementRef.nativeElement; + return this._document.activeElement === this._hostElement; } /** - * Sets the min and max properties on the slider thumb input. + * Sets the min, max, and step properties on the slider thumb input. * * Must be called AFTER the sibling slider thumb input is guaranteed to have had its value * attribute value set. For a range slider, the min and max of the slider thumb input depends on @@ -155,15 +160,16 @@ export class MatSliderThumb implements AfterViewInit { * instead be capped at either the default min or max. * */ - private _initializeInputMinMax(): void { - const min = this._elementRef.nativeElement.hasAttribute('matSliderEndThumb') + private _initializeInputState(): void { + const min = this._hostElement.hasAttribute('matSliderEndThumb') ? this._slider._getInput(Thumb.START).value : this._slider.min; - const max = this._elementRef.nativeElement.hasAttribute('matSliderStartThumb') + const max = this._hostElement.hasAttribute('matSliderStartThumb') ? this._slider._getInput(Thumb.END).value : this._slider.max; - this._elementRef.nativeElement.min = `${min}`; - this._elementRef.nativeElement.max = `${max}`; + this._hostElement.min = `${min}`; + this._hostElement.max = `${max}`; + this._hostElement.step = `${this._slider.step}`; } /** @@ -175,7 +181,7 @@ export class MatSliderThumb implements AfterViewInit { * instead be capped at either the default min or max. */ private _initializeInputValueProperty(): void { - this._elementRef.nativeElement.value = `${this.value}`; + this._hostElement.value = `${this.value}`; } /** @@ -186,8 +192,8 @@ export class MatSliderThumb implements AfterViewInit { */ private _initializeInputValueAttribute(): void { // Only set the default value if an initial value has not already been provided. - if (!this._elementRef.nativeElement.hasAttribute('value')) { - this.value = this._elementRef.nativeElement.hasAttribute('matSliderEndThumb') + if (!this._hostElement.hasAttribute('value')) { + this.value = this._hostElement.hasAttribute('matSliderEndThumb') ? this._slider.max : this._slider.min; } @@ -369,7 +375,7 @@ export class MatSlider implements AfterViewInit, OnDestroy { /** Gets the slider thumb HTML input element of the given thumb position. */ _getInputElement(thumbPosition: Thumb): HTMLInputElement { - return this._getInput(thumbPosition)._elementRef.nativeElement; + return this._getInput(thumbPosition)._hostElement; } /** Gets the slider thumb HTML element of the given thumb position. */