const CustomizedSlider = withStyles((theme) => ({
  track: {
    //styles the line between thumbs
    height: 4,
    backgroundColor: theme.palette.warning.main, // we can manipulate color here
  },
  rail: {
    //styles line outside of thumbs
    opacity: 1,
    height: 4,
    borderRadius: 0,
  },
  thumb: {
    height: 14,
    width: 14,
    background: 'white',
    border: '1px solid black',
  },
  mark: {
    height: 8,
    borderRadius: 0,
  },
  markActive: {
    opacity: 1,
    backgroundColor: 'currentColor',
  },
}))(Slider);

<CustomizedSlider
              className={className}
              value={data.severity || 0}
              valueLabelDisplay="off"
              step={1}
              min={0}
              max={4}
              marks={steps}
              onChange={this.handleSeverityChange}
            />

This component is a part of UI. It rendered in class component in the same way: I need to have a colored track that is based on steps (input[data-index]). For example: if the step.value === 0 the backgroundColor of the active track is red, step.value === 1 - blue and so on