bug(mat-mdc-slider): Slider value jumps after completion of drag if global box-sizing: border-box CSS reset is used

[JWess]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

If a global * { box-sizing: border-box; } reset is used, the new MDC slider doesn't track the mouse drag properly. When the drag ends and the mouse button is unclicked, the number jumps slightly. If the border-box is removed, the issue goes away.

Here is an example GIF using the "basic slider" Stackblitz example from the docs:

Here is the corresponding Stackblitz:
https://stackblitz.com/edit/angular-a1nrfj?file=src/styles.scss

Reproduction

Steps to reproduce:

Add the following to styles.css:

* {
  box-sizing: border-box;
}

Add the discrete attribute to <mat-slider discrete> for easier tracking.

Drag the slider and then unclick. The number will jump slightly.

Expected Behavior

When the slider is unclicked after a drag, the number stays the same.

Actual Behavior

The slider number will jump slightly upon unclick after dragging the slider.

Environment

• Angular: 15.0.2
• CDK/Material: 15.0.1
• Browser(s): Chrome
• Operating System: Windows

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}