How to control the style of the default valueLabelComponent of material ui Slider?

Question

It is too large and the background color isn't right.

So the solution is:

1. Change the size and background color of the default valueLabelComponent.
2. Create a component that has the same shape as the default with the correct size and color, of course.

Either solution would be fine.

Thanks

Answer 1

Currently, the size of the value label component is not customizable according to this ticket. You can use withStyles to customize your own style on the same component. I have created this code sandbox where you can change the size and color keeping the same style.

Furthermore, you can create your own component and pass it to a slider prop name ValueLabelComponent but for that, you need to play around with the CSS. Follow this example for creating custom value label component.