【问题标题】:How to change the thumb icon of the material-ui slider如何更改material-ui滑块的拇指图标
【发布时间】:2019-11-20 06:38:38
【问题描述】:

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

【问题讨论】:

    标签: reactjs material-ui


    【解决方案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]} 
    />
    

    【讨论】:

    • 你成功了吗?你能分享例子吗?
    • 实际上是否有关于如何执行此操作的文档,或者我们是否只有一个显示它的 Codesandbox,仅此而已?我也想更改滑块的其他组件。
    猜你喜欢
    • 2020-07-27
    • 1970-01-01
    • 2013-04-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多