Update slider range when passing new props

src/index.js

@@ -23,14 +23,19 @@ class Nouislider extends React.Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    const { start, disabled } = this.props;
-    return !isEqual(nextProps.start, start) || nextProps.disabled !== disabled;
+    const { start, disabled, range } = this.props;
+    return (
+      !isEqual(nextProps.start, start) ||
+      nextProps.disabled !== disabled ||
+      !isEqual(nextProps.range, range)
+    );
   }
 
   componentDidUpdate() {
-    const { start, disabled } = this.props;
+    const { start, disabled, range } = this.props;
     this.slider.set(start);
     this.toggleDisable(disabled);
+    this.updateRange(range);
   }
 
   componentWillUnmount() {
@@ -59,6 +64,11 @@ class Nouislider extends React.Component {
     }
   };
 
+  updateRange = range => {
+    const sliderHTML = this.sliderContainer.current;
+    sliderHTML.noUiSlider.updateOptions({ range });
+  };
+
   createSlider() {
     const { onUpdate, onChange, onSlide, onStart, onEnd, onSet } = this.props;
     const slider = nouislider.create(this.sliderContainer.current, {

src/utils.js

@@ -6,5 +6,27 @@ export const isEqual = (val1, val2) => {
   if (Array.isArray(val1) && Array.isArray(val2)) {
     return JSON.stringify(val1) === JSON.stringify(val2);
   }
+  if (typeof val1 === "object" && typeof val2 === "object") {
+    return isEquivalentObject(val1, val2);
+  }
   return false;
 };
+
+const isEquivalentObject = (obj1, obj2) => {
+  var aProps = Object.getOwnPropertyNames(obj1);
+  var bProps = Object.getOwnPropertyNames(obj2);
+
+  if (aProps.length != bProps.length) {
+    return false;
+  }
+
+  for (var i = 0; i < aProps.length; i++) {
+    var propName = aProps[i];
+
+    if (obj1[propName] !== obj2[propName]) {
+      return false;
+    }
+  }
+
+  return true;
+};

tests/utils.test.js

@@ -15,7 +15,15 @@ describe('isEqual function', () => {
     expect(isEqual(['a', 3], ['a', 3])).toBe(true);
   });
 
+  it('Return right result for comparing objects', () => {
+    expect(isEqual({ min: 3, max: 3 }, { min: 3, max: 3 })).toBe(true);
+  });
+
   it('Return false for comparing values with different types', () => {
     expect(isEqual(3, '3')).toBe(false);
   });
+
+  it('Return false for comparing objects with different values', () => {
+    expect(isEqual({ min: 3, max: 3 }, { min: 3, max: 1 })).toBe(false);
+  });
 });