bug(mat-mdc-slider): thumb should use % instead of px

[tomasdev]

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

https://stackblitz.com/edit/angular-us2jqe-a7chp1?file=src%2Fapp%2Fslider-overview-example.ts

The thumb is not correctly positioned when resizing the container of a mat-mdc-slider. However, the track is.

Reproduction

Steps to reproduce:

1. Have a mat-mdc-slider with CSS width: 100%
2. Resize it's container with any means other than window resize (i.e., a UX could have a panel that pushes content meaning the container will be less wide)

Expected Behavior

Thumb and track are always aligned

Actual Behavior

Thumb and track stop being aligned

Environment

• Angular: 13
• CDK/Material: 13
• Browser(s): All
• Operating System (e.g. Windows, macOS, Ubuntu): All

[crisbeto]

This is an issue in MDC, but we should be able to handle it on our side as well.