[Slider] Individual MarkLabel customization

[mstrugo]

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

Current Behavior ✋

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 👌

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 ⏯️

Tweak left MarkLabel overriding MUI Theme

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

Your Environment 💻

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

Thank you! 😄
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?

material-ui/packages/material-ui/src/Slider/Slider.js

Line 697 in 3d973a2

data-index={index}

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!

[pranshuchittora]

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

[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.

[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 Slider = styled(MuiSlider)({
  '& .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:121-327

[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

[samanmovaghar]

I have found a better solution, so if you would like to add styling to the first index and last one dynamically, you can try like this

.MuiSlider-mark, MuiSlider-markActive {
    &[style="left: 0%;"], &[style="left: 100%;"]{
      your css here 
    }
  }

[kenklin]

@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
    }

In ES2015 you can use computed property names, like below. This may not be your idea of dynamic, but rather computed (once).

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

FYI - I've used this approach to specify 3 different styles of marks, whose data indices are computed at initial render, when I generate the marks. Like this:

[`& .MuiSlider-mark[data-index="${pitLaneDataIndex}"]`]: {
    backgroundColor: "white",
    height: MILESTONE_HEIGHT
},
[`& .MuiSlider-mark[data-index="${boxToPitOutDataIndex}"]`]: {
    backgroundColor: "lime",
    height: MILESTONE_HEIGHT
},
'& .MuiSlider-mark': {
    height: TICK_HEIGHT, // Default was too short
},

[Eliav2]

i was able to customize the mark completely using slots:

<Slider
  marks            
  slots={{ mark: CustomMark }}
  valueLabelDisplay="auto"
  ...
/>


type MarkProps = {
  "data-index": number
  className: string
  ownerState: {
    marks: boolean
    sx: {
      "& .MuiSlider-markLabel": {
        fontSize: string
      }
    }
    slots: {}
    size: string
    value: number
    max: number
    valueLabelDisplay: string
    isRtl: boolean
    min: number
    disabled: boolean
    disableSwap: boolean
    orientation: string
    color: string
    step: number
    track: string
    marked: boolean
    dragging: boolean
    focusedThumbIndex: number
  }
  markActive: boolean
  style: {
    right: string
  }
}

const CustomMark = (props:MarkProps) => {
  return (
    <div
      className={props.className}
      style={{
        ...props.style, // holds { right: <percentage> }
        position: "absolute",
        width: 5,
        height: 5,
        borderRadius: "50%",
        background: "red",
      }}
    ></div>
  );
};