antDesign Slider滑动输入条的marks配置避坑

antd官方文档说明marks为刻度标记，对象类型，且key的类型必须为Number，项目中需要用到负数发现报错，手动把key改为String类型实现想要的效果。效果如下：

郭绍琦

2424人浏览 · 2022-06-02 15:08:24

郭绍琦 · 2022-06-02 15:08:24 发布

antd官方文档说明marks为刻度标记，对象类型，且key的类型必须为Number，项目中需要用到负数发现报错，手动把key改为String类型实现想要的效果。

marks 刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 object { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } }

const marks = {
    '-2': '慢',
    '-1': '',
    '0': '默认',
    '1': '',
    '2': '快'
};

<Slider
     marks={marks}
     step={1}
     included={false}
     min={-2}
     max={2}
/>

效果如下：