mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 13:08:41 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
1.5 KiB
1.5 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 5 |
|
zh-CN
使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。
en-US
Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/lib/slider';
const marks: SliderMarks = {
0: '0°C',
26: '26°C',
37: '37°C',
100: {
style: {
color: '#f50',
},
label: <strong>100°C</strong>,
},
};
const App: React.FC = () => (
<>
<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} />
</>
);
export default App;