具有多种颜色的材质 UI 滑块答案

【问题标题】：MaterialUI slider with multiple colours具有多种颜色的材质 UI 滑块
【发布时间】：2020-02-25 07:56:19
【问题描述】：

我现在正在进入 MaterialUI，特别是我想创建一个范围滑块。我正在使用这个例子https://material-ui.com/components/slider/#range-sliders

我想要实现的是为“高”、“中”和“低”范围设置不同的颜色。结果应该类似于：

拇指的颜色并不重要，但我想清楚地区分轨道上的不同范围。

有没有办法做到这一点？

【问题讨论】：

Material UI 还不支持，你只能有两种颜色，默认栏和 CSS 的活动栏...github.com/mui-org/material-ui/issues/1653
您可以使用渐变来实现这一点。在此处查看我的示例：stackoverflow.com/questions/59744468/….

标签： css material-ui

【解决方案1】：

嘿，我认为我使用滑块上的 ThumbComponent 组件输入以一种不错的方式解决了这个问题，我注意到当有两个拇指时，它们的数据索引属性不同。

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>
  );
}

输出屏幕截图对不起，我不习惯在堆栈上回答： https://imgur.com/YybkFK6（我无法嵌入答案）

最后也是最有用的是codepen：https://codesandbox.io/s/dualrange-two-colors-fzifz

希望对你有帮助！！！

【讨论】：

曲目未着色