ant-design/components/slider/demo/mark.md
2018-11-28 15:11:02 +08:00

61 lines
1.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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.
````jsx
import { Slider } from 'antd';
const marks = {
0: '0°C',
26: '26°C',
37: '37°C',
100: {
style: {
color: '#f50',
},
label: <strong>100°C</strong>,
},
};
ReactDOM.render(
<div>
<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} />
</div>,
mountNode
);
````
<style>
#components-slider-demo-mark h4 {
margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
margin-bottom: 44px;
}
</style>