diff --git a/src/Range.jsx b/src/Range.jsx index 8f1d0991e..d613a43ee 100644 --- a/src/Range.jsx +++ b/src/Range.jsx @@ -61,8 +61,18 @@ class Range extends React.Component { if (nextBounds.length === bounds.length && nextBounds.every((v, i) => v === bounds[i])) return; this.setState({ bounds: nextBounds }); + if (bounds.some(v => utils.isValueOutOfRange(v, nextProps))) { - this.props.onChange(nextBounds); + const newValues = value.map((v) => { + if (v < nextBounds[0]) { + v = nextBounds[0]; + } + if (v > nextBounds[1]) { + v = nextBounds[1]; + } + return v; + }); + this.props.onChange(newValues); } } diff --git a/tests/Range.test.js b/tests/Range.test.js index 0f5299250..6f4ad4986 100644 --- a/tests/Range.test.js +++ b/tests/Range.test.js @@ -79,6 +79,14 @@ describe('Range', () => { expect(wrapper.find('.rc-slider-handle').length).toBe(2); }); + it('should only update bounds that are out of range', () => { + const props = { min: 0, max: 10000, value: [0.01, 10000], onChange: jest.fn() }; + const range = mount(); + range.setProps({ min: 0, max: 500 }); + + expect(props.onChange).toHaveBeenCalledWith([0.01, 500]); + }); + // https://github.com/react-component/slider/pull/256 it('should handle mutli handle mouseEnter correctly', () => { const wrapper = mount();