[Slider] Update to match the specification

[mukhammad-akilov]

I need to change text in label, not background color

const theme = createMuiTheme({ overrides:{ MuiSlider: { valueLabel: { color: 'black', }, } }

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

Current Behavior 😯

It changes only tbackground color, not text color

Expected Behavior 🤔

It should change only text color, not background color

Tech	Version
Material-UI	v4.9.0
React	16.12.0
Browser	Google Chrome 80

[mukhammad-akilov]

I fixed this problem by changing constrastText to "needed color" pallete theme

[oliviertassinari]

@Ghost180195 Thanks for raising this issue. At first glance, it seems that we will need to update the style of the component:

https://material.io/components/sliders/#anatomy

https://www.google.com/flights

---

We should be able to move from 3 to 1 or 2 elements. In any case, it's likely a breaking change, so something to plan for v5.

In the meantime, I would propose that we make the SliderValueLabel a public component:

diff --git a/packages/material-ui/src/Slider/ValueLabel.js b/packages/material-ui/src/Slider/ValueLabel.js
index e2f21ec0d..6b57749d5 100644
--- a/packages/material-ui/src/Slider/ValueLabel.js
+++ b/packages/material-ui/src/Slider/ValueLabel.js
@@ -69,4 +69,4 @@ function ValueLabel(props) {
   );
 }

-export default withStyles(styles, { name: 'PrivateValueLabel' })(ValueLabel);
+export default withStyles(styles, { name: 'MuiSliderValueLabel' })(ValueLabel);

@Ghost180195 Do you want to work on the problem? :)

[oliviertassinari]

The latest design of the slider I could find on Google's product:

• https://www.google.com/travel

• https://www.google.com/travel/flights

• Google Pixel 4 (2019) Android 11 (Latest version)

Any other idea where we could find a slider to benchmark?

[oliviertassinari]

More sources to benchmark:

• Adobe XD kit released in August 2020:

• Flutter component https://api.flutter.dev/flutter/material/Slider-class.html

• Material Components Android: https://github.com/material-components/material-components-android