docs: update demos for Slider

funreading · Nov 21, 2016 · c306494 · c306494
1 parent dd0be2e
commit c306494
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 45 deletions.
diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
@@ -14,12 +14,28 @@ title:
 Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
 
 ````jsx
-import { Slider } from 'antd';
-
-ReactDOM.render(<div>
-  <Slider defaultValue={30} />
-  <Slider range defaultValue={[20, 50]} />
-  <Slider range defaultValue={[20, 50]} disabled />
-</div>
-, mountNode);
+import { Slider, Switch } from 'antd';
+
+class Demo extends React.Component {
+  state = {
+    disabled: false,
+  };
+
+  handleDisabledChange = (disabled) => {
+    this.setState({ disabled });
+  }
+
+  render() {
+    const { disabled } = this.state;
+    return (
+      <div>
+        Disabled: <Switch checked={disabled} onChange={this.handleDisabledChange} />
+        <Slider defaultValue={30} disabled={disabled} />
+        <Slider range defaultValue={[20, 50]} disabled={disabled} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
 ````
diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md
@@ -1,6 +1,6 @@
 ---
 order: 4
-title: 
+title:
   zh-CN: 事件
   en-US: Event
 ---
@@ -11,21 +11,25 @@ title:
 
 ## en-US
 
-The `onChange` callback function will fire when the user changes the slider's value. 
+The `onChange` callback function will fire when the user changes the slider's value.
 The `onAfterChange` callback function will fire when `onmouseup` fired.
 
 ````jsx
 import { Slider } from 'antd';
 
-function log(value) {
-  console.log(value);
+function onChange(value) {
+  console.log('onChange: ', value);
+}
+
+function onAfterChange(value) {
+  console.log('onAfterChange: ', value);
 }
 
 ReactDOM.render(
   <div>
-    <Slider defaultValue={30} onChange={log} />
-    <Slider range step={10} defaultValue={[20, 50]} onChange={log} />
-    <Slider defaultValue={30} onAfterChange={log} />
-  </div>
-, mountNode);
+    <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
+    <Slider range step={10} defaultValue={[20, 50]} onChange={onChange} onAfterChange={onAfterChange} />
+  </div>,
+  mountNode
+);
 ````
diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
@@ -39,7 +39,7 @@ const IconSlider = React.createClass({
 
   render() {
     return (
-      <div className="iconWrapper">
+      <div className="icon-wrapper">
         <Icon className={this.state.preIconClass} type={this.props.icon[0]} />
         <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
         <Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
@@ -48,18 +48,16 @@ const IconSlider = React.createClass({
   },
 });
 
-ReactDOM.render(
-  <IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-o']} />
-, mountNode);
+ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-o']} />, mountNode);
 ````
 
 ````css
-.iconWrapper {
+.icon-wrapper {
   position: relative;
   padding: 0px 30px;
 }
 
-.iconWrapper .anticon {
+.icon-wrapper .anticon {
   position: absolute;
   top: -3px;
   width: 16px;
@@ -69,11 +67,11 @@ ReactDOM.render(
   color: #ccc;
 }
 
-.iconWrapper .anticon:first-child {
+.icon-wrapper .anticon:first-child {
   left: 0;
 }
 
-.iconWrapper .anticon:last-child {
+.icon-wrapper .anticon:last-child {
   right: 0;
 }
 

diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md
@@ -1,8 +1,8 @@
 ---
 order: 1
-title: 
+title:
   zh-CN: 带输入框的滑块
-  en-US: Slider with input field
+  en-US: Slider with InputNumber
 ---
 
 ## zh-CN
@@ -34,7 +34,7 @@ const IntegerStep = React.createClass({
           <Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue} />
         </Col>
         <Col span={4}>
-          <InputNumber min={1} max={20} style={{ marginLeft: '16px' }}
+          <InputNumber min={1} max={20} style={{ marginLeft: 16 }}
             value={this.state.inputValue} onChange={this.onChange}
           />
         </Col>
@@ -61,7 +61,7 @@ const DecimalStep = React.createClass({
           <Slider min={0} max={1} onChange={this.onChange} value={this.state.inputValue} step={0.01} />
         </Col>
         <Col span={4}>
-          <InputNumber min={0} max={1} style={{ marginLeft: '16px' }} step={0.01}
+          <InputNumber min={0} max={1} style={{ marginLeft: 16 }} step={0.01}
             value={this.state.inputValue} onChange={this.onChange}
           />
         </Col>
@@ -70,8 +70,11 @@ const DecimalStep = React.createClass({
   },
 });
 
-ReactDOM.render(<div>
-  <IntegerStep />
-  <DecimalStep />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <IntegerStep />
+    <DecimalStep />
+  </div>,
+  mountNode
+);
 ````
diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
@@ -1,7 +1,7 @@
 ---
 order: 3
-title: 
-  zh-CN: 分段式滑块
+title:
+  zh-CN: 带标签的滑块
   en-US: Graduated slider
 ---
 
@@ -33,15 +33,16 @@ const marks = {
 
 ReactDOM.render(
   <div>
-    <p>`included=true`</p>
+    <p><code>included=true</code></p>
     <Slider marks={marks} defaultValue={37} />
     <Slider range marks={marks} defaultValue={[26, 37]} />
-    <p>`included=false`</p>
+    <p><code>included=false</code></p>
     <Slider marks={marks} included={false} defaultValue={37} />
-    <p>`marks && step`</p>
+    <p><code>marks && step</code></p>
     <Slider marks={marks} step={10} defaultValue={37} />
-    <p>`step=null`</p>
+    <p><code>step=null</code></p>
     <Slider marks={marks} step={null} defaultValue={37} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode
+);
 ````
diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md
@@ -20,8 +20,11 @@ function formatter(value) {
   return `${value}%`;
 }
 
-ReactDOM.render(<div>
-  <Slider tipFormatter={formatter} />
-  <Slider tipFormatter={null} />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Slider tipFormatter={formatter} />
+    <Slider tipFormatter={null} />
+  </div>,
+  mountNode
+);
 ````