diff --git a/examples/range.html b/examples/range.html
new file mode 100644
index 0000000..48cdce8
--- /dev/null
+++ b/examples/range.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/range.js b/examples/range.js
new file mode 100644
index 0000000..0fabeeb
--- /dev/null
+++ b/examples/range.js
@@ -0,0 +1,31 @@
+'use strict';
+
+require('rc-slider/assets/index.less');
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Slider = require('rc-slider');
+
+var style = {width: 400, margin: 50};
+var log = console.log.bind(console);
+
+ReactDOM.render(
+  <div>
+    <div style={style}>
+      <p>Basic Range</p>
+      <Slider range defaultValue={[0, 20]} onChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Range，`step=20` </p>
+      <Slider range step={20} defaultValue={[20, 40]} onBeforeChange={log} />
+    </div>
+    <div style={style}>
+      <p>Basic Range，`step=20, dots` </p>
+      <Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
+    </div>
+    <div style={style}>
+      <p>Controlled Range，`step=20, dots` </p>
+      <Slider range value={[20, 40]} />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));
diff --git a/examples/simple.html b/examples/slider.html
similarity index 100%
rename from examples/simple.html
rename to examples/slider.html
diff --git a/examples/simple.js b/examples/slider.js
similarity index 66%
rename from examples/simple.js
rename to examples/slider.js
index bd75880..1fdd974 100644
--- a/examples/simple.js
+++ b/examples/slider.js
@@ -22,27 +22,19 @@ ReactDOM.render(
     </div>
     <div style={style}>
       <p>Basic Slider，`step=20`</p>
-      <Slider step={20} />
+      <Slider step={20} defaultValue={50} onBeforeChange={log} />
     </div>
     <div style={style}>
       <p>Basic Slider，`step=20, dots`</p>
-      <Slider dots step={20} />
+      <Slider dots step={20} defaultValue={100} onAfterChange={log} />
     </div>
     <div style={style}>
       <p>Basic Slider with `tipFormatter`</p>
       <Slider tipFormatter={percentFormatter} tipTransitionName='rc-slider-tooltip-zoom-down' onChange={log} />
     </div>
     <div style={style}>
-      <p>Basic Range</p>
-      <Slider range defaultValue={[0, 20]} onChange={log} />
-    </div>
-    <div style={style}>
-      <p>Basic Range，`step=20` </p>
-      <Slider range step={20} defaultValue={[20, 40]} onAfterChange={log} />
-    </div>
-    <div style={style}>
-      <p>Basic Range，`step=20, dots` </p>
-      <Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
+      <p>Controlled Slider</p>
+      <Slider value={50} />
     </div>
   </div>
   , document.getElementById('__react-content'));