diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md index 50e6927024..b4223303e3 100644 --- a/components/slider/demo/basic.md +++ b/components/slider/demo/basic.md @@ -2,7 +2,7 @@ - order: 0 -基本滑动条。 +基本滑动条。当 `range` 为 `true` 时,渲染为双滑块。当 `disabled` 为 `true` 时,滑块处于不可用状态。 --- @@ -10,8 +10,9 @@ import { Slider } from 'antd'; ReactDOM.render(
- - + + +
, document.getElementById('components-slider-demo-basic')); ```` @@ -20,4 +21,8 @@ ReactDOM.render(
.code-box-demo .ant-slider { margin-bottom: 50px; } + +.code-box-demo .ant-slider:last-child { + margin-bottom: 0; +} diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md new file mode 100644 index 0000000000..447bdf457f --- /dev/null +++ b/components/slider/demo/event.md @@ -0,0 +1,22 @@ +# 事件 + +- order: 4 + +当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。 + +--- + +````jsx +import { Slider } from 'antd'; + +function log(value) { + console.log(value); +} + +ReactDOM.render( +
+ + +
+, document.getElementById('components-slider-demo-event')); +```` diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md index f77b9a6bef..c82d079c6b 100644 --- a/components/slider/demo/mark.md +++ b/components/slider/demo/mark.md @@ -2,19 +2,29 @@ - order: 3 -使用 `marks` 属性标注分段式滑块,结合 `index` 可以指定滑块按钮初始位置。 +使用 `marks` 属性标注分段式滑块,使用 `value` / `defaultValue` 指定滑块位置。可以结合 `step` `included` 使用。 --- ````jsx import { Slider } from 'antd'; +const marks = { + 0: '0°C', + 26: '26°C', + 37: '37°C', + 100: '100°C' +}; + ReactDOM.render( -
+

包含关系

- + +

并列关系

- + +

结合 `step`

+
, document.getElementById('components-slider-demo-mark')); ```` diff --git a/components/slider/demo/range.md b/components/slider/demo/range.md deleted file mode 100644 index b8aa92c588..0000000000 --- a/components/slider/demo/range.md +++ /dev/null @@ -1,18 +0,0 @@ -# 双滑块 - -- order: 4 - -设置 `range` 为 `true`,将会渲染两个滑块。 - ---- - -````jsx -import { Slider } from 'antd'; - -ReactDOM.render( -
- - -
-, document.getElementById('components-slider-demo-range')); -```` diff --git a/components/slider/index.md b/components/slider/index.md index fafdf9952b..a8f836d9d9 100644 --- a/components/slider/index.md +++ b/components/slider/index.md @@ -19,10 +19,9 @@ | min | Number | 0 | 最小值 | max | Number | 100 | 最大值 | step | Number | 1 | 步长,取值必须大于 0,并且可被 (max - min) 整除 -| value | Number or [Number, Number]| | 设置当前取值。当 `range` 为 `false` 时,使用 `Number`。否则用 `[Number, Number]` -| defaultValue | Number or [Number, Number]| 0 or [0, 0] | 设置初始取值。当 `range` 为 `false` 时,使用 `Number`。否则用 `[Number, Number]` -| marks | Array | [] | 分段标记,标记每一个 step,如果 step 属性没有定义,则 `marks` 属性会被忽略。当 `range` 为 `true` 时,忽略该属性 -| included | Boolean | true | 分段式滑块,值为 true 时表示值为包含关系,false 表示并列 -| index | Number | | 为具备 `step` 或者 `marks` 的 slider 提供滑块操作的当前位置。当 `range` 为 `true` 时,忽略该属性 -| defaultIndex | Number | 0 | 为具备 `step` 或者 `marks` 的 slider 提供滑块操作的初始位置。当 `range` 为 `true` 时,忽略该属性 -| disabled | Boolean | false | 值为 `true` 时,滑块为 disable 禁用状态 +| value | Number or [Number, Number]| | 设置当前取值。当 `range` 为 `false` 时,使用 `Number`,否则用 `[Number, Number]` +| defaultValue | Number or [Number, Number]| 0 or [0, 0] | 设置初始取值。当 `range` 为 `false` 时,使用 `Number`,否则用 `[Number, Number]` +| marks | Object {Number: String} | {} | 分段标记,key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内 +| included | Boolean | true | `marks` 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列 +| disabled | Boolean | false | 值为 `true` 时,滑块为禁用状态 +| onChange | Function | NOOP | 当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。