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

Question

我想像上图中那样为滑块设置自定义图标。

Answer 1

您可以使用AirbnbSlider来设置ThumbComponent来更改图标。 https://material-ui.com/components/slider/#discrete-sliders

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