如何更改material-ui滑块的拇指图标

Question

我想为滑块设置自定义图标，如上图所示。

Answer 1

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

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]} 
/>