如何更改Material-UI滑块的拇指图标

Question

我想为滑块设置自定义图标，就像上面的图片一样。

- iamPavan

Answer 1

您可以使用 AirbnbSlider，并设置 ThumbComponent 来改变图标。详情请见：https://material-ui.com/components/slider/#discrete-sliders。

如需在 Material-UI Slider 中为多个拇指分别设置样式，请参考此链接：https://www.tutorialguruji.com/react-js/how-to-style-each-thumb-independently-when-material-ui-slider-have-multiple-thumbs/。

function AirbnbThumbComponent(props) {
  return (
    <span {...props}>
      <span className="bar" />
      <span className="bar" />
      <span className="bar" />
    </span>
  );
}
...
...
<AirbnbSlider 
     ThumbComponent={AirbnbThumbComponent} 
     defaultValue={[20]} 
/>

- user11910739

---

你成功了吗？你能分享一个例子吗？ - Ruslan Korkin

有没有关于如何做这个的文档，还是我们只有一个展示它的Codesandbox？我也想改变滑块的其他组件。 - Plumpie

Answer 2

我能够使用MUI文档中的类，通过简单的CSS更改它：

.MuiSlider-thumb {
  background-image: url("./Images/arrow.svg");
}

- catie