Material UI：如何在用户与滑块交互时更改滑块拇指的可见性，即更改滑块值？答案

【问题标题】：Material UI: How to change slider thumb visibility when user interacts with the slider, i.e. changes the slider value?Material UI：如何在用户与滑块交互时更改滑块拇指的可见性，即更改滑块值？
【发布时间】：2020-12-10 11:34:04
【问题描述】：

我的应用程序中有一个 Material UI 滑块。我想保持拇指不可见，直到用户更改滑块值。使用滑块时，我希望拇指在用户设置的值处保持可见。使用active CSS 属性，我设法隐藏了拇指并仅在用户使用它时显示它，即当滑块被手指或鼠标指针拖动时。当交互停止时，我希望它保持所选值，但它消失了。

初始状态
滑块与（拖动）交互
完成交互

我尝试添加另一个重复的滑块，拇指组件始终可见，然后尝试根据值 (value ? <Slider1 /> : <Slider2 />) 有条件地渲染其中一个滑块，但它在某种程度上起作用。 Thumb 始终设置为滑块的开头，与值无关。

有什么想法吗？谢谢。

代码示例请参考material ui slider API。

【问题讨论】：

标签： css reactjs material-ui slider

【解决方案1】：

也许使用 withStyles()，导入 withStyles 和 Slider：

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

然后自定义您的 Slider，如下所示：

export const CustomizedSlider = withStyles({
  thumb: {
    height: 28,
    width: 28,
    backgroundColor: "transparent",
    marginTop: -14,
    marginLeft: -14,
    "&:hover, &$active": {
      backgroundColor: "red",
    },
  },
})(Slider);

默认颜色应为“透明”，鼠标悬停时会变为“红色”。更多关于 withStyles() here.希望对您有所帮助！

代码参考：https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/slider/CustomizedSlider.js

【讨论】：