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();