[docs] Customize valueLabel in SliderUnstyled with tailwind

[cjoecker]

Duplicates

• [X] I have searched the existing issues

Related page

https://mui.com/base/guides/working-with-tailwind-css/#create-the-slider-component

Kind of issue

Missing information

Issue description

I was looking for a way to customize the valueLabel in SliderUnstyled. As described in the documentation, I added it as follows:

     <SliderUnstyled
         ...
          valueLabelDisplay={'auto'}
          slotProps={{
            thumb: {
            ...
            valueLabel: {
              className: 'relative -top-7 -left-full bg-gray-800 rounded px-2 py-1 backdrop-blur bg-opacity-90 hidden',
            }
          }}
        />

I want that when I'm hovering the thumb, the valueLabel is shown. I see that the component is adding the class .MuiSlider-valueLabelOpen to the valueLabel component. But it is not really creating and deleting the component. I could do the following to show and hide the label:

.MuiSlider-valueLabelOpen{
  display: inline;
}

But I'm not sure if it is expected to do it like that. I couldn't find anything in the documentation about handling the open and close behavior of sub-components. How should I do it? Would it make sense to add more documentation about it?

Context 🔦

I want that only when I'm hovering the thumb of the SliderUnstyled, the valueLabel is shown.

[ZeeshanTamboli]

@cjoecker You can use the valueLabelDisplay prop with auto value to show the label when the thumb is hovered or focused. Does it help? It's mentioned in the API docs.

[cjoecker]

@ZeeshanTamboli, I added the prop valueLabelDisplay={'auto'} to the component. What is not described in the documentation is how the appear-disappear behavior should work.

I see that the component is adding the class .MuiSlider-valueLabelOpen to the valueLabel component. But it is not really creating and deleting the component. I could do the following to show and hide the label:

.MuiSlider-valueLabelOpen{
  display: inline;
}

But I'm not sure if it is expected to do it like that. I couldn't find anything in the documentation about handling the open and close behavior of sub-components. How should I do it? Would it make sense to add more documentation about it?

[ZeeshanTamboli]

@cjoecker So you want the thumb value component to be created and deleted when the thumb is hovered/unhovered? What is your use case?

[cjoecker]

@ZeeshanTamboli I just want to know how is it expected that the valueLabel should appear and disappear. It is not written in the documentation. The valueLabel is always visible even if valueLabelDisplay is set to auto.

Here you can see what I mean: https://codesandbox.io/s/1nm9he?file=/demo.tsx:2833-2866

[ZeeshanTamboli]

@cjoecker Yup, there is nothing in the SliderUnstyled documentation that shows how the valueLabel should appear and disappear. Internally, we just toggle the .MuiSlider-valueLabelOpen class based on it's open state. Like you pointed out, you need to apply styles by targeting .MuiSlider-valueLabelOpen when the thumb is hovered over and also keep valueLabelDisplay to auto if you want to enable that feature.

There is a lack of documentation and we should show a demo about it. This demo shows it incorrectly. There are no styles applied there by targeting .MuiSlider-valueLabelOpen thus it's always visible.