mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 01:19:45 +08:00
61 lines
1.5 KiB
Markdown
61 lines
1.5 KiB
Markdown
---
|
||
order: 5
|
||
title:
|
||
zh-CN: 带标签的滑块
|
||
en-US: Graduated slider
|
||
---
|
||
|
||
## 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.
|
||
|
||
```tsx
|
||
import { Slider } from 'antd';
|
||
import type { SliderMarks } from 'antd/es/slider';
|
||
import React from 'react';
|
||
|
||
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;
|
||
```
|
||
|
||
<style>
|
||
#components-slider-demo-mark h4 {
|
||
margin: 0 0 16px;
|
||
}
|
||
#components-slider-demo-mark .ant-slider-with-marks {
|
||
margin-bottom: 44px;
|
||
}
|
||
</style>
|