使用@material-ui/core，如何制作一个Slider，将轨道分为左右不同颜色？

Question

滑块从 -10 变为 +10。从 -10 到 0，颜色应该是红色。从 0 到 +10，颜色应该是绿色。

如何使用来自@material-ui/core 的<Slider /> 实现此目的？

Answer 1

我不确定您是指Slider 的rail 还是track 元素——这个示例同时设置了两种样式。本质上，这只是针对 Material-UI API 向您公开的正确类的情况。您可以获得Slider 元素的类here 的完整列表。

铁轨的背景可以用 CSS 生成的简单线性渐变图像来设置样式，轨道本身可以通过将 prop 传递给 makeStyles 函数来有条件地设置样式：

import React from "react";

import Slider from "@material-ui/core/Slider";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  rail: {
    background: "linear-gradient(90deg, red 50%, green 50%)"
  },
  track: {
    background: ({ value }) => (value >= 0 ? "green" : "red")
  }
});

const marks = Array.from({ length: 21 }, (_, i) => ({
  value: i - 10,
  label: i - 10
}));

const App = () => {
  const [value, setValue] = React.useState(0);

  const classes = useStyles({ value });

  return (
    <Slider
      onChange={(e, newValue) => setValue(newValue)}
      max={10}
      min={-10}
      value={value}
      classes={classes}
      marks={marks}
      step={1}
    />
  );
};

export default App;

从表面上看你的评论，你也可以将 value 属性传递给 rail 并有条件地设置它的样式。您永远不需要将轨道的左侧设置为灰色，因为在这种情况下它总是会被轨道覆盖：

rail: {
    background: ({ value }) =>
      `linear-gradient(90deg, red 50%, ${value < 0 ? "gray" : "green"} 50%)`
},

否则，我将完全摆脱 track 元素并提高轨道的不透明度，同时通过两个条件考虑两个不同的侧面：

rail: {
  opacity: 0.7,
  background: ({ value }) => {
    const left = value < 0 ? "red" : "gray";
    const right = value < 0 ? "gray" : "green";
    return `linear-gradient(90deg, ${left} 50%, ${right} 50%)`;
  }
},
track: {
  display: "none",
}