Skip to content

Commit

Permalink
fix(material/slider): log proper error when slider isn't configured c…
Browse files Browse the repository at this point in the history
…orrectly (#29745)

Fixes that we were throwing a cryptic error if the slider isn't set up properly.

Fixes #29738.
  • Loading branch information
crisbeto authored Sep 18, 2024
1 parent 2dd269e commit 0ed5d7d
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 6 deletions.
12 changes: 10 additions & 2 deletions src/material/slider/slider-thumb.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions src/material/slider/slider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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),
);
}
Expand Down Expand Up @@ -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',
);

Expand Down

0 comments on commit 0ed5d7d

Please sign in to comment.