Merge pull request #40 from react-component/fix-controlled-slider

Fix controlled slider

examples/marks.js

@@ -8,13 +8,15 @@ var Slider = require('rc-slider');
 
 var style = {width: 400, margin: 50};
 var marks = ['A','B','C','D', 'E', 'F'];
-var log = console.log.bind(console);
+var log = function(value) {
+  console.log(value);
+};
 
 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 +38,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.html

@@ -0,0 +1 @@
+placeholder

examples/range.js

@@ -0,0 +1,54 @@
+'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 = function(value) {
+  console.log(value);
+};
+
+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}>
+      <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</p>
+      <Slider range value={[20, 40]} />
+    </div>
+    <div style={style}>
+      <p>Customized Range</p>
+      <CustomizedRange />
+    </div>
+  </div>
+  , document.getElementById('__react-content'));

examples/slider.js

@@ -7,13 +7,32 @@ var ReactDOM = require('react-dom');
 var Slider = require('rc-slider');
 
 var style = {width: 400, margin: 50};
-var log = console.log.bind(console);
+var log = function(value) {
+  console.log(value);
+};
 
 
 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}>
@@ -22,27 +41,23 @@ 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} />
+      <p>Controlled Slider</p>
+      <Slider value={50} />
     </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>Customized Slider</p>
+      <CustomizedSlider />
     </div>
   </div>
   , document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "slider ui component for react",
   "keywords": [
     "react",

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));
     }
   }
 
@@ -144,7 +147,7 @@ class Slider extends React.Component {
   }
 
   onStart(position) {
-    this.triggerEvents('onBeforeChange');
+    this.triggerEvents('onBeforeChange', this.getValue());
 
     const value = this.calcValueByPos(position);
     this.startValue = 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;
 

tests/index.spec.js

@@ -8,10 +8,6 @@ var Simulate = TestUtils.Simulate;
 var $ = require('jquery');
 require('../assets/index.less');
 
-if (typeof initMochaPhantomJS === 'function') {
-  initMochaPhantomJS()
-}
-
 describe('rc-slider', function () {
   this.timeout(5000);
   var div = document.createElement('div');