Material-ui: [Slider] Individual MarkLabel customization

[mstrugo]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior :hand:

In a RangeSlider with MarkLabels in Min and Max, it doesn't seem possible to style only one MarkLabel. With MuiSlider-markLabel theme override we could affect all mark labels but couldn't apply certain style to only one.
MarkLabels position is absolute, with a transform _(translateX)_ and inline margin left.

If MarkLabel is overrided, I could have my Min MarkLabel OK, but I couldn't do the same with the Max one.

Also, we couldn't use css selectors because all the markup is maded with Span

Expected Behavior :ok_hand:

I expect to have something like this:

So I think I need a different class for each mark or a something to style only my Max (right) MarkLabel

Steps to Reproduce :play_or_pause_button:

Tweak left MarkLabel overriding MUI Theme

MuiSlider: {
  markLabel: {
      transform: 'translateX(-12%)',
  },
},

Your Environment :computer:

Tech | Version
------------ | -------------
Language | Typescript
Material-UI | v4.2.1
React | 16.8.6
Styles | JSS
Browser | Google Chrome

Thank you! :smile:
_P.S.: I love MUI and this is my first issue submitted... sorry for my bad english!_

[oliviertassinari]

What do you think of adding data-index attributes to each mark like we do with the thumbs?
https://github.com/mui-org/material-ui/blob/3d973a2bd93f9625398bf9a6086d64f8a7dbca6d/packages/material-ui/src/Slider/Slider.js#L697

Then, you can target the right mark with CSS.

[mstrugo]

Thanks @oliviertassinari for your quickly answer.
I think that could work. And we have to override like this?

MuiSlider: {
  markLabel: {
    color: graysDefault,
    '&[data-index="1"]': {
      left: '50%',
    },
  },
},

thanks!

[oliviertassinari]

Yes, this is what I had in mind.

[mstrugo]

Thanks!!

[oliviertassinari]

Do you want to submit a pull request? :)

[pranshuchittora]

I think we must consider #17034 before implementing the fix.

[mstrugo]

Do you want to submit a pull request? :)

Yeah! Thanks!

[mstrugo]

@oliviertassinari pull request submitted :)

[oliviertassinari]

@mstrugo Thanks, we will review it :)

[eps1lon]

Why would :nth-of-type not work?

[mstrugo]

@eps1lon
Why would :nth-of-type not work?

Because that css selector only works in markup elements instead of class names, and all of Slider components are Span in same tree level

[oliviertassinari]

I should have thought about it in the first place, the label accept any node. You can style it so it has the required margin shift to match your app layout requirement. In the future, we can consider to have an option to handle it automatically. I think that we should wait for more upvotes.

[oliviertassinari]

Regarding a future potential API, one option is to have:

interface Mark {
  value: number;
  label?: React.ReactNode;
  labelAlign?: 'left' | 'center' | 'right';
}

It would also help when the marks are too close and the labels overlap. I like this approach.

[eps1lon]

@mstrugo Right, nth-of-type doesn't count among the parent selector.

It would still help to share the actual code and what you're trying to do. This would help a lot more than adding an API to make it easier to style every label differently.

[Louis345]

What is the status of this issue? I'm having the same issue as the OP. Has this solution been implemented?

MuiSlider: {
  markLabel: {
    color: graysDefault,
    '&[data-index="1"]': {
      left: '50%',
    },
  },
},

[Lijun21]

Has this solution been implemented? It doesn't seem work.

MuiSlider: {
  markLabel: {
    color: graysDefault,
    '&[data-index="1"]': {
      left: '50%',
    },
  },
},

[oliviertassinari]

@Lijun21 It works, yes:

const useStyles = makeStyles({
  root: {
    '& .MuiSlider-markLabel[data-index="0"]': {
      transform: "translateX(0%)"
    },
    '& .MuiSlider-markLabel[data-index="1"]': {
      transform: "translateX(-100%)"
    }
  }
});

https://codesandbox.io/s/material-demo-forked-ekd4f?file=/demo.js:130-358

[enza252]

@oliviertassinari how would you propose the data-index value could be changed dynamically?

I'm wondering if there is a way to pass in a desired index to style, such as this:

    '& .MuiSlider-markLabel[data-index=`${indextostyle}`]': {
      color: palette.red.main
    }

[oliviertassinari]

@enza252 You can do that with https://next.material-ui.com/components/slider-styled and emotion's styled() style helper. It let you defined styles dynamically, from the props.

[enza252]

@oliviertassinari thank you, that's a great point in the right direction - we currently export our Slider using withStyles, so I'll investigate