具有多种颜色的MaterialUI滑块

Question

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

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

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

反正有实现这一目标的方法吗？

Answer 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

希望这会有所帮助！