fix: #226

examples/range.js

@@ -111,6 +111,27 @@ class ControlledRange extends React.Component {
   }
 }
 
+// https://github.com/react-component/slider/issues/226
+class PureRenderRange extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      foo: false,
+    };
+  }
+  handleChange = (value) => {
+    console.log(value);
+    this.setState({
+      foo: !this.state.foo,
+    });
+  }
+  render() {
+    return (
+      <Range defaultValue={[20, 40, 60, 80]} onChange={this.handleChange} allowCross={false} />
+    );
+  }
+}
+
 ReactDOM.render(
   <div>
     <div style={style}>
@@ -153,5 +174,9 @@ ReactDOM.render(
       <p>Range with dynamic `max` `min`</p>
       <DynamicBounds />
     </div>
+    <div style={style}>
+      <p>Range as child component</p>
+      <PureRenderRange />
+    </div>
   </div>
   , document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-slider",
-  "version": "8.1.3",
+  "version": "8.1.4",
   "description": "Slider UI component for React",
   "keywords": [
     "react",
@@ -74,6 +74,7 @@
     "prop-types": "^15.5.4",
     "rc-tooltip": "^3.4.2",
     "rc-util": "^4.0.4",
+    "shallowequal": "^1.0.1",
     "warning": "^3.0.0"
   }
 }

src/Range.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import shallowEqual from 'shallowequal';
 import Track from './common/Track';
 import createSlider from './common/createSlider';
 import * as utils from './utils';
@@ -48,6 +49,11 @@ class Range extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return;
+    if (this.props.min === nextProps.min &&
+        this.props.max === nextProps.max &&
+        shallowEqual(this.props.value, nextProps.value)) {
+      return;
+    }
     const { bounds } = this.state;
     const value = nextProps.value || bounds;
     const nextBounds = value.map(v => this.trimAlignValue(v, nextProps));