Invalid slider thumb input configuration! Valid configur

Error message

Invalid slider thumb input configuration!

   Valid configurations are as follows:

     <mat-slider>
       <input matSliderThumb>
     </mat-slider>

     or

     <mat-slider>
       <input matSliderStartThumb>
       <input matSliderEndThumb>
     </mat-slider>

What it means

MatSlider requires exactly one thumb input (`matSliderThumb`) or exactly two (`matSliderStartThumb` + `matSliderEndThumb`) for a range slider. `_validateInputConfiguration` checks start/end validity and throws this error for any other combination. It enforces the declarative contract of the slider's inner inputs.

Source

Thrown at src/material/slider/slider.ts:966

/** Ensures that there is not an invalid configuration for the slider thumb inputs. */
function _validateInputs(
  isRange: boolean,
  endInputElement: _MatSliderThumb | _MatSliderRangeThumb | undefined,
  startInputElement: _MatSliderThumb | undefined,
): void {
  const startValid =
    !isRange || startInputElement?._hostElement.hasAttribute('matSliderStartThumb');
  const endValid = endInputElement?._hostElement.hasAttribute(
    isRange ? 'matSliderEndThumb' : 'matSliderThumb',
  );

  if (!startValid || !endValid) {
    _throwInvalidInputConfigurationError();
  }
}

function _throwInvalidInputConfigurationError(): void {
  throw Error(`Invalid slider thumb input configuration!

   Valid configurations are as follows:

     <mat-slider>
       <input matSliderThumb>
     </mat-slider>

     or

     <mat-slider>
       <input matSliderStartThumb>
       <input matSliderEndThumb>
     </mat-slider>
   `);
}

View on GitHub (pinned to 0411926e7d)

Solutions

For a single-value slider use exactly one `<input matSliderThumb>`.
For a range slider pair `matSliderStartThumb` and `matSliderEndThumb` — one of each, nothing else.
Remove any leftover/duplicate thumb inputs from the slider template.
After fixing, re-check that each input has a distinct ngModel/form-control binding.

Example fix

// before
<mat-slider>
  <input matSliderStartThumb>
</mat-slider>
// after
<mat-slider>
  <input matSliderStartThumb [(ngModel)]="min">
  <input matSliderEndThumb [(ngModel)]="max">
</mat-slider>

Defensive patterns

Strategy: validation

Validate before calling

const thumbs = sliderEl.querySelectorAll(
  '[matSliderThumb],[matSliderStartThumb],[matSliderEndThumb]');
const start = sliderEl.querySelectorAll('[matSliderStartThumb]').length;
const end = sliderEl.querySelectorAll('[matSliderEndThumb]').length;
const plain = sliderEl.querySelectorAll('[matSliderThumb]').length;
const valid = (plain === 1) || (plain === 0 && start === 1 && end === 1);
if (!valid) throw new Error('Invalid slider thumb configuration');

Prevention

Use exactly one matSliderThumb, or exactly one start + one end input.
Never mix matSliderThumb with matSliderStart/EndThumb in the same slider.
Bind each thumb input to its own distinct form control.

When it happens

Trigger: `<input matSliderStartThumb>` without an end thumb; two `matSliderThumb` inputs inside one slider; mixing `matSliderThumb` with `matSliderStartThumb`; an end thumb without a start thumb.

Common situations: Migrating from the old single-input mat-slider API and leaving stale inputs; partially converting a single slider to a range slider by adding only a start thumb; copy-paste duplicating a thumb input.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/c972f216d65b6bfa. Report an issue: GitHub.