diff --git a/src/material/slider/slider-thumb.ts b/src/material/slider/slider-thumb.ts index 774ed77371d5..c8c25fa84320 100644 --- a/src/material/slider/slider-thumb.ts +++ b/src/material/slider/slider-thumb.ts @@ -110,14 +110,22 @@ export class MatSliderVisualThumb implements _MatSliderVisualThumb, AfterViewIni } ngAfterViewInit() { + const sliderInput = this._slider._getInput(this.thumbPosition); + + // No-op if the slider isn't configured properly. `MatSlider` will + // throw an error instructing the user how to set up the slider. + if (!sliderInput) { + return; + } + this._ripple.radius = 24; - this._sliderInput = this._slider._getInput(this.thumbPosition)!; + this._sliderInput = sliderInput; this._sliderInputEl = this._sliderInput._hostElement; - const input = this._sliderInputEl; // These listeners don't update any data bindings so we bind them outside // of the NgZone to prevent Angular from needlessly running change detection. this._ngZone.runOutsideAngular(() => { + const input = this._sliderInputEl!; input.addEventListener('pointermove', this._onPointerMove); input.addEventListener('pointerdown', this._onDragStart); input.addEventListener('pointerup', this._onDragEnd); diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts index ad9f252fc3f0..9a326ad1aa24 100644 --- a/src/material/slider/slider.ts +++ b/src/material/slider/slider.ts @@ -428,7 +428,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider { if (typeof ngDevMode === 'undefined' || ngDevMode) { _validateInputs( this._isRange, - this._getInput(_MatThumb.END)!, + this._getInput(_MatThumb.END), this._getInput(_MatThumb.START), ); } @@ -938,12 +938,12 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider { /** Ensures that there is not an invalid configuration for the slider thumb inputs. */ function _validateInputs( isRange: boolean, - endInputElement: _MatSliderThumb | _MatSliderRangeThumb, - startInputElement?: _MatSliderThumb, + endInputElement: _MatSliderThumb | _MatSliderRangeThumb | undefined, + startInputElement: _MatSliderThumb | undefined, ): void { const startValid = !isRange || startInputElement?._hostElement.hasAttribute('matSliderStartThumb'); - const endValid = endInputElement._hostElement.hasAttribute( + const endValid = endInputElement?._hostElement.hasAttribute( isRange ? 'matSliderEndThumb' : 'matSliderThumb', );