angular/components · error

`getStartThumb` is only applicable for range sliders. Did yo

Error message

`getStartThumb` is only applicable for range sliders. Did you mean to use `getEndThumb`?

What it means

The slider test harness's `getStartThumb` only applies to range sliders; calling it on a single-value slider throws this error and suggests `getEndThumb`. Start/end thumbs exist only when the slider has start+end inputs; a plain slider exposes just one thumb.

Source

Thrown at src/material/slider/testing/slider-harness.ts:43

   * @return a `HarnessPredicate` configured with the given options.
   */
  static with<T extends MatSliderHarness>(
    this: ComponentHarnessConstructor<T>,
    options: SliderHarnessFilters = {},
  ): HarnessPredicate<T> {
    return new HarnessPredicate(this, options)
      .addOption('isRange', options.isRange, async (harness, value) => {
        return (await harness.isRange()) === value;
      })
      .addOption('disabled', options.disabled, async (harness, disabled) => {
        return (await harness.isDisabled()) === disabled;
      });
  }

  /** Gets the start thumb of the slider (only applicable for range sliders). */
  async getStartThumb(): Promise<MatSliderThumbHarness> {
    if (!(await this.isRange())) {
      throw Error(
        '`getStartThumb` is only applicable for range sliders. ' +
          'Did you mean to use `getEndThumb`?',
      );
    }
    return this.locatorFor(MatSliderThumbHarness.with({position: ThumbPosition.START}))();
  }

  /** Gets the thumb (for single point sliders), or the end thumb (for range sliders). */
  async getEndThumb(): Promise<MatSliderThumbHarness> {
    return this.locatorFor(MatSliderThumbHarness.with({position: ThumbPosition.END}))();
  }

  /** Gets whether the slider is a range slider. */
  async isRange(): Promise<boolean> {
    return await (await this.host()).hasClass('mdc-slider--range');
  }

  /** Gets whether the slider is disabled. */

View on GitHub (pinned to 0411926e7d)

Solutions

  1. Use `await harness.getEndThumb()` (or `getThumb()`) to get the single thumb of a non-range slider.
  2. Guard with `if (await harness.isRange())` before calling `getStartThumb`.
  3. Update the fixture template to a range slider (start+end inputs) if a start thumb is genuinely needed.

Example fix

// before
const thumb = await sliderHarness.getStartThumb();
// after
const thumb = (await sliderHarness.isRange())
  ? await sliderHarness.getStartThumb()
  : await sliderHarness.getEndThumb();
Defensive patterns

Strategy: type-guard

Validate before calling

const isRange = await sliderHarness.isRange();
if (!isRange) {
  const thumb = await sliderHarness.getEndThumb();
} else {
  const start = await sliderHarness.getStartThumb();
}

Type guard

async function hasStartThumb(h: MatSliderHarness): Promise<boolean> {
  return h.isRange();
}

Try / catch

try {
  const thumb = await sliderHarness.getStartThumb();
} catch (e) {
  if ((e as Error).message.includes('only applicable for range sliders')) {
    return sliderHarness.getEndThumb();
  }
  throw e;
}

Prevention

When it happens

Trigger: `await harness.getStartThumb()` on a `MatSliderHarness` whose DOM contains a single `matSliderThumb` input (not a range).

Common situations: Reusing a test written for a range slider against a single-value slider; switching a component template from range to single thumb without updating tests; assuming start thumb always exists.

Related errors


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