CODEWITHSUNDEEP
cssmaterial-ui
Svetoslav Petrov
Svetoslav Petrov

Reputation: 1198

MaterialUI slider with multiple colours

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?

Upvotes: 6

Views: 4050

Answers (2)

Rakesh Sharma
Rakesh Sharma

Reputation: 688

Check this coloured range MUI Slider (normal/reversed) implemented in the codepen: https://codesandbox.io/s/metrics-color-threshold-slider-reversed-o58nu6.

Upvotes: 4

Charles Murphy
Charles Murphy

Reputation: 29

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://i.sstatic.net/C1HUC.jpg (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!!!

Upvotes: 2

Related Questions