bug(slider): Basic and Range Slider do no render properly inside MatDialog, when EnterAnimationDuration > 0

[Hemki]

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

The Angular Material Slider Component's Thumb doesn't render properly inside a Dialog Component when the default animation isn't deactivated.

The Slider Thumb (both within Basic Slider as well as Range Slider) is not rendered at the correct location, but instead 20% to the left, when placed inside the Dialog Component without disabling its (default) enterAnimation.

Depending on the slider's size, this can be quite noticable. The Slider Component should behave identically whether being placed in a Dialog Component with Animation enabled or not.
Disabling the Dialog's enterAnimation fixes the issue.

Please take a look at my Stackblit bug reproduction (or alternatively as Application URL).

Reproduction

Stackblit bug reproduction (or alternatively as Application URL).

Steps to reproduce:

1. Open MatDialog without disabling default enter Animation
2. Within said Dialog, place the Slider Component
3. Both basic slider and range slider will have missplaced thumbs (20% to the left of its intended value)

Expected Behavior

The Slider Component's Thumb should be rendered at its correct location, given by its value.

Actual Behavior

The Slider Component's Thumb is rendered approx. 20% to the left of its intended place.

Environment

• Angular: 15.0.0
• CDK/Material: 15.0.0
• Browser(s): Chrome, Safari, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Tested on macOS

[csvn]

I think I encountered the same issue. My slider uses steps and is rendered inside a MatDialog.
As soon as a user interacts with it, the thumb pops off to the end of the track like it should.

I see that there is already a fix in progress though. Let's hope it's merged and that there's a patch release soon 🤞😇

[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.}