[Slider] Value label position if disabled

[LorenzHenk]

If the Slider is disabled, the value label is slightly off to the right.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The value label for a disabled Slider is positioned slightly to the right.

The problem is at this line: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/ValueLabel.js#L23
Removing the line fixed the problem, can you explain why it is needed?

Expected Behavior 🤔

The value label should be centered.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-edpse

Steps:

1. Use valueLabelDisplay="on" to make the value label visible all the time
2. Use disabled={true}

Context 🔦

I want to display the value of a disabled slider.

Your Environment 🌎

Tech	Version
Material-UI	v4.8.3

[oliviertassinari]

Removing the line fixed the problem, can you explain why it is needed?

I have no idea. I suspect it originates from iteration on the initial implementation.

[davidfdriscoll]

Sorry to reopen this issue but this problem is back. On a disabled slider the value label is again positioned slightly to the right.

See a code sandbox here. The same steps as above reproduce the problem:

• valueLabelDisplay="on"
• disabled={true}

This time I think the problem is at this line. The value label is being centered by a manual calculation of left: 'calc(-50% - 4px)', to fix an IE bug. That manual calculation centers the value label properly in the case of an active thumb (width 12 pixels) but not in the case of a disabled thumb (width 8 pixels).

If interested I could try to put together a PR to fix the issue. It would probably involve applying the disabled pseudo-class to the value label element in addition to the root and thumb and styling accordingly.

[oliviertassinari]

@davidfdriscoll Thanks for the report. I think that we should remove the IE 11 fix, in the source and in the customization demos and add a visual regression test. This is mainly motivated by https://next.material-ui.com/getting-started/supported-platforms/#ie-11.

[davidfdriscoll]

That sounds good -- would you mind if I try tackling that and submit a pull request to remove the IE 11 fix and add a test?

[oliviertassinari]

@davidfdriscoll Please do :)