From a4795453b8deb78a0b23ad118f36f7c868b6c517 Mon Sep 17 00:00:00 2001
From: simaQ <sima.zhang1990@gmail.com>
Date: Tue, 14 Jul 2015 12:06:44 +0800
Subject: [PATCH] update slider demo

---
 components/slider/demo/basic.md               | 14 +++
 components/slider/demo/icon-slider.md         | 94 +++++++++++++++++++
 components/slider/demo/input-number-slider.md | 45 +++++++++
 components/slider/demo/mark.md                | 12 ++-
 4 files changed, 164 insertions(+), 1 deletion(-)
 create mode 100644 components/slider/demo/icon-slider.md
 create mode 100644 components/slider/demo/input-number-slider.md

diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
index 6a1ba462e0..65268b67e3 100644
--- a/components/slider/demo/basic.md
+++ b/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>
\ No newline at end of file
diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
new file mode 100644
index 0000000000..4298b57687
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/slider/demo/input-number-slider.md b/components/slider/demo/input-number-slider.md
new file mode 100644
index 0000000000..a423550a3a
--- /dev/null
+++ b/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>
diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
index f20d5150d8..dc704a8ef9 100644
--- a/components/slider/demo/mark.md
+++ b/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>
\ No newline at end of file