From 31bbc9258b5e25487be0c2255df67880133fb60b Mon Sep 17 00:00:00 2001
From: mrkosima <klimashevich.k@gmail.com>
Date: Thu, 8 Nov 2018 17:57:51 +0100
Subject: [PATCH 1/2] Fix position calculations for 'vertical' mode

---
 src/Slider.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Slider.jsx b/src/Slider.jsx
index f5d729ef..65c5863c 100644
--- a/src/Slider.jsx
+++ b/src/Slider.jsx
@@ -516,7 +516,7 @@ class Rheostat extends React.Component {
   }
 
   positionPercent(x, y, sliderBox) {
-    const { orientation } = this.state;
+    const { orientation } = this.props;
     if (orientation === VERTICAL) {
       return ((y - sliderBox.top) / sliderBox.height) * PERCENT_FULL;
     }

From ea18f8077c29f4976a427e575f2400e9e68a476d Mon Sep 17 00:00:00 2001
From: Kanstantsin Klimashevich <klimashevich.k@gmail.com>
Date: Mon, 12 Nov 2018 15:45:39 +0100
Subject: [PATCH 2/2] Add tests for percent position calculations

---
 test/slider-test.jsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/test/slider-test.jsx b/test/slider-test.jsx
index efe4bc3e..69ede3e7 100644
--- a/test/slider-test.jsx
+++ b/test/slider-test.jsx
@@ -671,4 +671,36 @@ describe('Slider API', () => {
       assert(newValues[1] === 80, 'the second value is 80');
     });
   });
+
+  describe('positionPercent', () => {
+    it('should return correct position for horizontal orientation', () => {
+      const box = {
+        height: 10,
+        left: 150,
+        right: 200,
+        top: 50,
+        width: 300,
+      };
+      const slider = shallow(<Slider />).dive().instance();
+
+      assert.equal(slider.positionPercent(box.left, 55, box), 0, 'check returns min value');
+      assert.equal(slider.positionPercent(box.left + box.width / 2, 55, box), 50, 'check returns middle value');
+      assert.equal(slider.positionPercent(box.left + box.width, 55, box), 100, 'check returns max value');
+    });
+
+    it('should return correct position for vertical orientation', () => {
+      const box = {
+        height: 200,
+        left: 50,
+        right: 100,
+        top: 50,
+        width: 20,
+      };
+      const slider = shallow(<Slider orientation="vertical" />).dive().instance();
+
+      assert.equal(slider.positionPercent(55, box.top, box), 0, 'check returns min value');
+      assert.equal(slider.positionPercent(55, box.top + box.height / 2, box), 50, 'check returns middle value');
+      assert.equal(slider.positionPercent(55, box.top + box.height, box), 100, 'check returns max value');
+    });
+  });
 });