fix: Slider should be a controlled component

examples/marks.js

@@ -14,7 +14,7 @@ ReactDOM.render(
   <div>
     <div style={style}>
       <p>Slider with marks, `included=true`</p>
-      <Slider marks={marks} defaultIndex={1} />
+      <Slider marks={marks} onChange={log} defaultIndex={1} />
     </div>
     <div style={style}>
       <p>Slider with marks and steps, `included=true`</p>
@@ -36,7 +36,7 @@ ReactDOM.render(
     </div>
     <div style={style}>
       <p>Range with marks and steps</p>
-      <Slider range marks={marks} step={10} onChange={log} defaultIndex={[1,2]} />
+      <Slider range marks={marks} step={10} defaultIndex={[1,2]} />
     </div>
   </div>
   , document.getElementById('__react-content'));

examples/range.js

@@ -9,6 +9,23 @@ var Slider = require('rc-slider');
 var style = {width: 400, margin: 50};
 var log = console.log.bind(console);
 
+var CustomizedRange = React.createClass({
+  getInitialState: function() {
+    return {
+      value: [20, 40]
+    }
+  },
+  onChange: function(value) {
+    log(value);
+    this.setState({
+      value: value
+    });
+  },
+  render: function() {
+    return <Slider range value={this.state.value} onChange={this.onChange} />;
+  }
+});
+
 ReactDOM.render(
   <div>
     <div style={style}>
@@ -24,8 +41,12 @@ ReactDOM.render(
       <Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
     </div>
     <div style={style}>
-      <p>Controlled Range，`step=20, dots` </p>
+      <p>Controlled Range</p>
       <Slider range value={[20, 40]} />
     </div>
+    <div style={style}>
+      <p>Customized Range</p>
+      <CustomizedRange />
+    </div>
   </div>
   , document.getElementById('__react-content'));

examples/slider.js

@@ -14,6 +14,23 @@ function percentFormatter(v) {
   return v + ' %';
 }
 
+var CustomizedSlider = React.createClass({
+  getInitialState: function() {
+    return {
+      value: 50
+    }
+  },
+  onChange: function(value) {
+    log(value);
+    this.setState({
+      value: value
+    });
+  },
+  render: function() {
+    return <Slider value={this.state.value} onChange={this.onChange} />;
+  }
+});
+
 ReactDOM.render(
   <div>
     <div style={style}>
@@ -36,5 +53,9 @@ ReactDOM.render(
       <p>Controlled Slider</p>
       <Slider value={50} />
     </div>
+    <div style={style}>
+      <p>Customized Slider</p>
+      <CustomizedSlider />
+    </div>
   </div>
   , document.getElementById('__react-content'));

src/Slider.jsx

@@ -120,10 +120,13 @@ class Slider extends React.Component {
     const oldValue = state[state.handle];
     if (value === oldValue) return;
 
+    // If it is not controlled component
     if (!('value' in props) && !('index' in props)) {
       this.setState({[state.handle]: value}, () => {
         this.triggerEvents('onChange', this.getValue());
       });
+    } else {
+      this.triggerEvents('onChange', this.getChangedValue(state.handle, value));
     }
   }
 
@@ -173,10 +176,19 @@ class Slider extends React.Component {
     this.setState({
       handle: valueNeedChanging,
       recent: valueNeedChanging,
-      [valueNeedChanging]: value,
-    }, () => {
-      this.triggerEvents('onChange', this.getValue());
     });
+
+    const props = this.props;
+    // If it is not controlled component
+    if (!('value' in props) && !('index' in props)) {
+      this.setState({
+        [valueNeedChanging]: value,
+      }, () => {
+        this.triggerEvents('onChange', this.getValue());
+      });
+    } else {
+      this.triggerEvents('onChange', this.getChangedValue(valueNeedChanging, value));
+    }
   }
 
   getValue() {
@@ -184,6 +196,16 @@ class Slider extends React.Component {
     return this.props.range ? [lowerBound, upperBound] : upperBound;
   }
 
+  getChangedValue(valueNeedChanging, value) {
+    const state = this.state;
+    const data = {
+      upperBound: state.upperBound,
+      lowerBound: state.lowerBound,
+    };
+    data[valueNeedChanging] = value;
+    return this.props.range ? [data.lowerBound, data.upperBound] : data.upperBound;
+  }
+
   getIndex(value) {
     const {marks, min, max, step} = this.props;