ant-design Slider 滑动输入条配置完大小颜色，初始化之后hover上去会抖动

yhuiod9q 于 22天前发布在其他

关注(0)|答案(2)|浏览(23)

Reproduction link

Steps to reproduce

设置纯黑色滑块

<ConfigProvider
      theme={{
        components: {
          Slider: {
            handleSize: 16,
            handleActiveColor: '#000',
            handleColor: '#000',
            trackBg: '#000',
            trackHoverBg: '#000',
          },
        },
      }}
    >
      <Slider tooltip={{ formatter: null }} />
    </ConfigProvider>

然后把滑块after也设置为黑色

.ant-slider .ant-slider-handle::after {
  background-color: #000;
}

What is expected?

没有轻微抖动

What is actually happening?

初始化之后hover上去有轻微抖动
| Environment | Info |
| ------------ | ------------ |
| antd | 5.15.1 |
| React | react |
| System | macOS 14.3 |
| Browser | 版本 122.0.6261.112 |

ant-design

来源：https://github.com/ant-design/ant-design/issues/47864

2条答案

按热度按时间

k3bvogb11#

Start a new pull request in StackBlitz Codeflow .

react-ri1rum (Open reproduction)

赞(0）回复(0）举报 22天前

oyjwcjzk2#

你这个不是颜色的问题吧，是因为你的 handleSize 设置的跟 hover 时的效果大小差不多，期间有个动画所以看起来抖动了，或者加上 css 样式

.ant-slider .ant-slider-handle::after {
  transition-duration: 0s;
}

.ant-slider:hover .ant-slider-handle::after {
  transition-duration: 0s;
}

赞(0）回复(0）举报 22天前

我来回答

ant-design Slider 滑动输入条配置完大小颜色，初始化之后hover上去会抖动

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

2条答案

相关问题

热门标签

最新问答