react antd marks分段式滑块

refer: https://ant.design/components/slider-cn

在使用slider的时候，可以设置特定的范围，例如数据显示80年，那么使用marks进行标记，特定的年份进行标记，起始年份和终止年份可以设置为特定的点，默认可以设置为起始年份，根据情况进行选择slider的使用。

第一个是只有一个可以滑动的点，可以连续的滑动，而且设置了特定的点；

第二个是有两个可以滑动的点，每个滑动的点都可以连续地滑动；

第三个是只有一个可以连续滑动的点，但是不会显示从左到右或者从右到左的高亮；

第四个是使用了marks， 只能分段的滑动，特定的点也可以滑动；

第五个是只能滑动到特定的点。

import React from 'react';
import { Slider } from 'antd';
const marks = {
0: '0°C',
26: '26°C',
37: '37°C',
100: {
style: {
color: '#f50',
},
label: <strong>100°C</strong>,
},
};
const App = () => (
<>
<h4>included=true</h4>
<Slider marks={marks} defaultValue={37} />
<Slider range marks={marks} defaultValue={[26, 37]} />
<h4>included=false</h4>
<Slider marks={marks} included={false} defaultValue={37} />
<h4>marks & step</h4>
<Slider marks={marks} step={10} defaultValue={37} />
<h4>step=null</h4>
<Slider marks={marks} step={null} defaultValue={37} />
</>
);

可以增加css:

#components-slider-demo-mark h4 {
margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
margin-bottom: 44px;
}