From b1d715d51c91fb385efd2bca474c84c8ced17e1b Mon Sep 17 00:00:00 2001
From: Alex Masnou <alexmasnou@MacBook-Pro-de-Alex-Masnou.local>
Date: Mon, 8 Apr 2019 21:38:09 +0200
Subject: [PATCH 1/2] Update slider range when passing new props

---
 src/index.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index c69b205..9b2930e 100644
--- a/src/index.js
+++ b/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 ||
+      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, {

From 09fffad9f9ba6e8fe9ecb6259b4478f9779ea716 Mon Sep 17 00:00:00 2001
From: Alex Masnou <alex.masnou@wallapop.com>
Date: Tue, 9 Apr 2019 10:44:17 +0200
Subject: [PATCH 2/2] Check object equality when updating slider range

---
 src/index.js        |  2 +-
 src/utils.js        | 22 ++++++++++++++++++++++
 tests/utils.test.js |  8 ++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 9b2930e..485a5a1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,7 +27,7 @@ class Nouislider extends React.Component {
     return (
       !isEqual(nextProps.start, start) ||
       nextProps.disabled !== disabled ||
-      nextProps.range !== range
+      !isEqual(nextProps.range, range)
     );
   }
 
diff --git a/src/utils.js b/src/utils.js
index 00cf151..f570c8e 100644
--- a/src/utils.js
+++ b/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;
+};
diff --git a/tests/utils.test.js b/tests/utils.test.js
index b1744e9..f164b10 100644
--- a/tests/utils.test.js
+++ b/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);
+  });
 });