update slider demo

components/slider/demo/basic.md

@@ -10,7 +10,21 @@
 var Slider = antd.Slider;
 
 React.render(
+<div className="sliderContainer">
   <Slider />
+  <Slider value={65} disabled />
+</div>
 , document.getElementById('components-slider-demo-basic'));
 ````
 
+<style>
+/*  .sliderContainer p {
+	margin-bottom: 10px;
+  }
+  .sliderContainer .ant-slider {
+	margin-bottom: 45px;
+  }
+   .sliderContainer .ant-slider:last-child {
+	margin-bottom: 0;
+  }*/
+</style>

components/slider/demo/icon-slider.md

@@ -0,0 +1,94 @@
+# 带 icon 的滑块
+
+- order: 2
+
+---
+
+````jsx
+var Slider = antd.Slider;
+
+var IconSlider = React.createClass({
+  getInitialState() {
+    var max = this.props.max;
+    var min = this.props.min;
+    var mid = ((max - min) / 2).toFixed(5);
+
+    var preIcon, nextIcon;
+    if (this.props.value >= mid) {
+      preIcon = this.props.icon[0];
+      nextIcon = this.props.icon[1] + ' anticon-highlight';
+    } else {
+      preIcon = this.props.icon[0] + ' anticon-highlight';
+      nextIcon = this.props.icon[1];
+    }
+
+    return {
+      preIcon: preIcon,
+      nextIcon: nextIcon,
+      mid: mid,
+      sliderValue: this.props.value
+    };
+  },
+
+  handleChange(v) {
+    var preIcon, nextIcon;
+    if (v >= this.state.mid) {
+      preIcon = this.props.icon[0];
+      nextIcon = this.props.icon[1] + ' anticon-highlight';
+    } else {
+      preIcon = this.props.icon[0] + ' anticon-highlight';
+      nextIcon = this.props.icon[1];
+    }
+
+    this.setState( 
+      {
+        preIcon: preIcon,
+        nextIcon: nextIcon,
+        sliderValue: v
+      }
+    );
+  },
+  
+  render() {
+    return (
+      <div className="iconWrapper">
+        <i className={this.state.preIcon}></i>
+        <i className={this.state.nextIcon}></i>
+        <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
+      </div>
+    );
+  }
+});
+
+React.render(
+<IconSlider min={0} max={20} value={0} icon={['anticon anticon-lock', 'anticon anticon-unlock']} />
+, document.getElementById('components-slider-demo-icon-slider'));
+````
+
+<style>
+.iconWrapper {
+  position: relative;
+  padding: 0 24px;
+}
+
+.iconWrapper .anticon {
+  position: absolute;
+  top: -6px;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  font-size: 16px;
+  color: #ccc;
+}
+
+.iconWrapper .anticon:nth-child(1) {
+  left: 0;
+}
+.iconWrapper .anticon:nth-child(2){
+  right: 0;
+}
+
+.anticon.anticon-highlight {
+  color: #666;
+}
+</style>

components/slider/demo/input-number-slider.md

@@ -0,0 +1,45 @@
+# 带输入框的滑块
+
+- order: 1
+
+
+
+---
+
+````jsx
+var Slider = antd.Slider;
+var InputNumber = antd.InputNumber;
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      inputValue: 0
+    };
+  },
+  onChange(v){
+    this.setState({
+      inputValue: v
+    });
+  },
+  render() {
+  	return (
+  	  <div className="row">
+  	  	<div className="col-12 spacing">
+					<Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue}/>
+				</div>
+  	  	<div className="col-6">
+					<InputNumber min={1} max={20} value={this.state.inputValue} onChange={this.onChange} />
+				</div>
+	  	</div>
+  	);
+  }
+});
+
+React.render(<Test />, document.getElementById('components-slider-demo-input-number-slider'));
+````
+
+<style>
+	.spacing {
+		padding-right: 16px;
+	}
+</style>

components/slider/demo/mark.md

@@ -10,7 +10,17 @@
 var Slider = antd.Slider;
 
 React.render(
-  <Slider marks={["状态1","状态2","状态3","状态4"]} index={1}/>
+<div className="sliderContainer">
+  <p>包含关系</p>
+  <Slider marks={["状态1","状态2","状态3","状态4"]} index={1} />
+  <p>并列关系</p>
+  <Slider marks={["状态1","状态2","状态3","状态4"]} isIncluded={false} index={1} />
+</div>
 , document.getElementById('components-slider-demo-mark'));
 ````
 
+<style>
+	.sliderContainer .ant-slider {
+		margin-bottom: 30px;
+	}
+</style>