MaterialUI slider with multiple colours

user_4370164 0
Viewed 1740

I am getting into MaterialUI at the moment and specifically I want to create a range slider. I am using this example https://material-ui.com/components/slider/#range-sliders

What I am trying to achieve is to have different colours for "high", "medium" and "low" range. The result should be something similar to:

Multi-colour slider

The colour of the thumbs doesn't really matter but I want to clearly distinguish the different ranges on the rail.

Is there anyway to achieve that?

material-ui css
1 Answers

Hey I think I solved this in a decent way using the ThumbComponent component input on the slider which I noticed when having two thumbs their data-index properties were different. 

function MyThumbComponent(props) {
  if (props['data-index'] == 0) {
    props.style.backgroundColor = "green"
  } else if (props['data-index'] == 1) {
    props.style.backgroundColor = "red"
  }
  return (
    <span {...props}>
    </span>
  );
}

Output screenshot sorry I'm not use to answering on stack: https://imgur.com/YybkFK6 (I can't embed in answer)

Finally and most usefully here is the codepen: https://codesandbox.io/s/dualrange-two-colors-fzifz

Hope this helps!!!

user_46970790
Related