Fixed issue where controlled Range sliders with allowCross=false and …

src/Range.jsx

@@ -38,7 +38,7 @@ class Range extends React.Component {
             props.defaultValue : initialValue;
     const value = props.value !== undefined ?
             props.value : defaultValue;
-    const bounds = value.map(v => this.trimAlignValue(v));
+    const bounds = value.map((v, i) => this.trimAlignValue(v, i));
     const recent = bounds[0] === max ? 0 : bounds.length - 1;
 
     this.state = {
@@ -57,7 +57,7 @@ class Range extends React.Component {
     }
     const { bounds } = this.state;
     const value = nextProps.value || bounds;
-    const nextBounds = value.map(v => this.trimAlignValue(v, nextProps));
+    const nextBounds = value.map((v, i) => this.trimAlignValue(v, i, nextProps));
     if (nextBounds.length === bounds.length && nextBounds.every((v, i) => v === bounds[i])) return;
 
     this.setState({ bounds: nextBounds });
@@ -261,18 +261,22 @@ class Range extends React.Component {
     return true;
   }
 
-  trimAlignValue(v, nextProps = {}) {
+  trimAlignValue(v, index, nextProps = {}) {
     const mergedProps = { ...this.props, ...nextProps };
     const valInRange = utils.ensureValueInRange(v, mergedProps);
-    const valNotConflict = this.ensureValueNotConflict(valInRange, mergedProps);
+    const valNotConflict = this.ensureValueNotConflict(valInRange, index, mergedProps);
     return utils.ensureValuePrecision(valNotConflict, mergedProps);
   }
 
-  ensureValueNotConflict(val, { allowCross }) {
+  ensureValueNotConflict(val, valueHandle, { allowCross }) {
     const state = this.state || {};
     const { handle, bounds } = state;
     /* eslint-disable eqeqeq */
     if (!allowCross && handle != null) {
+      // If the value's handle is not the neighbour of the current handle, there is no conflict
+      if (handle - 1 !== valueHandle && handle + 1 !== valueHandle) {
+        return val;
+      }
       if (handle > 0 && val <= bounds[handle - 1]) {
         return bounds[handle - 1];
       }

tests/Range.test.js

@@ -4,6 +4,7 @@ import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import Range from '../src/Range';
 import createSliderWithTooltip from '../src/createSliderWithTooltip';
+import { setWidth } from './common/util';
 
 const RangeWithTooltip = createSliderWithTooltip(Range);
 
@@ -31,6 +32,23 @@ describe('Range', () => {
     expect(trackStyle.visibility).toMatch('visible');
   });
 
+  it('When dragging a handle in a Range that does not allow cross, do not adjust unrelated values', () => {
+    const rangeWrapper = mount(<Range value={[5, 50, 75]} allowCross={false} pushable={false}/>);
+    setWidth(rangeWrapper.instance().sliderRef, 100);
+    const rangeHandle = rangeWrapper.find('.rc-slider-handle').at(0).instance();
+    rangeWrapper.simulate('mousedown', {
+      type: 'mousedown',
+      target: rangeHandle,
+      pageX: 5, button: 0,
+      stopPropagation() {},
+      preventDefault() {},
+    });
+
+    rangeWrapper.setProps({ value: [0, 50, 75] });
+
+    expect(rangeWrapper.state('bounds')[2]).toBe(75);
+  });
+
   it('should render Multi-Range with value correctly', () => {
     const wrapper = mount(<Range count={3} value={[0, 25, 50, 75]} />);
     expect(wrapper.state('bounds')[0]).toBe(0);

tests/common/createSlider.test.js

@@ -3,23 +3,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Slider from '../../src';
 const { Range } = Slider;
-
-const setWidth = (object, width) => {
-  // https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176
-  Object.defineProperty(object, 'getBoundingClientRect', {
-    value: () => ({
-      width,
-      // Let all other values retain the JSDom default of `0`.
-      bottom: 0,
-      height: 0,
-      left: 0,
-      right: 0,
-      top: 0,
-    }),
-    enumerable: true,
-    configurable: true,
-  });
-};
+import { setWidth } from './util';
 
 describe('createSlider', () => {
   it('should render vertical Slider/Range, when `vertical` is true', () => {

tests/common/util.js

@@ -0,0 +1,18 @@
+const setWidth = (object, width) => {
+  // https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176
+  Object.defineProperty(object, 'getBoundingClientRect', {
+    value: () => ({
+      width,
+      // Let all other values retain the JSDom default of `0`.
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+    }),
+    enumerable: true,
+    configurable: true,
+  });
+};
+
+export { setWidth };