From a6d88121df6f3b2bdf63a93591a106ff6c7e4632 Mon Sep 17 00:00:00 2001
From: dasl- <david.leibovic@gmail.com>
Date: Sun, 20 Mar 2022 22:03:40 -0400
Subject: [PATCH 1/3] ensure onBeforeChange is called when clicking the rail

---
 src/Slider.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Slider.tsx b/src/Slider.tsx
index c7d5ea0e9..fc4a77e01 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -298,6 +298,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
         cloneNextValues.push(newValue);
       }
 
+      onBeforeChange?.(cloneNextValues);
       triggerChange(cloneNextValues);
       onAfterChange?.(getTriggerValue(cloneNextValues));
     }

From 6d7e9febdeea69c06048d4892d9492bcbf92de74 Mon Sep 17 00:00:00 2001
From: dasl- <david.leibovic@gmail.com>
Date: Mon, 11 Apr 2022 22:02:18 -0400
Subject: [PATCH 2/3] add test case

---
 tests/Slider.test.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/tests/Slider.test.js b/tests/Slider.test.js
index b952fb585..244d3485b 100644
--- a/tests/Slider.test.js
+++ b/tests/Slider.test.js
@@ -489,13 +489,23 @@ describe('Slider', () => {
 
   describe('click slider to change value', () => {
     it('ltr', () => {
+      const onBeforeChange = jest.fn();
       const onChange = jest.fn();
-      const { container } = render(<Slider onChange={onChange} />);
+      const onAfterChange = jest.fn();
+      const { container } = render(
+        <Slider
+          onBeforeChange={onBeforeChange}
+          onChange={onChange}
+          onAfterChange={onAfterChange}
+        />,
+      );
       fireEvent.mouseDown(container.querySelector('.rc-slider'), {
         clientX: 20,
       });
 
+      expect(onBeforeChange).toHaveBeenCalledWith(20);
       expect(onChange).toHaveBeenCalledWith(20);
+      expect(onAfterChange).toHaveBeenCalledWith(20);
     });
 
     it('rtl', () => {

From 74224ee4c22c2aef836674e8cfa7d477818f37a9 Mon Sep 17 00:00:00 2001
From: dasl- <david.leibovic@gmail.com>
Date: Mon, 11 Apr 2022 23:09:10 -0400
Subject: [PATCH 3/3] hopefully fix tests, address comments

---
 src/Slider.tsx       |  2 +-
 tests/Slider.test.js | 32 +++++++++++++++++++++-----------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/Slider.tsx b/src/Slider.tsx
index fc4a77e01..8c1033f45 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -298,7 +298,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
         cloneNextValues.push(newValue);
       }
 
-      onBeforeChange?.(cloneNextValues);
+      onBeforeChange?.(getTriggerValue(cloneNextValues));
       triggerChange(cloneNextValues);
       onAfterChange?.(getTriggerValue(cloneNextValues));
     }
diff --git a/tests/Slider.test.js b/tests/Slider.test.js
index 244d3485b..57f68d2b5 100644
--- a/tests/Slider.test.js
+++ b/tests/Slider.test.js
@@ -489,23 +489,13 @@ describe('Slider', () => {
 
   describe('click slider to change value', () => {
     it('ltr', () => {
-      const onBeforeChange = jest.fn();
       const onChange = jest.fn();
-      const onAfterChange = jest.fn();
-      const { container } = render(
-        <Slider
-          onBeforeChange={onBeforeChange}
-          onChange={onChange}
-          onAfterChange={onAfterChange}
-        />,
-      );
+      const { container } = render(<Slider onChange={onChange} />);
       fireEvent.mouseDown(container.querySelector('.rc-slider'), {
         clientX: 20,
       });
 
-      expect(onBeforeChange).toHaveBeenCalledWith(20);
       expect(onChange).toHaveBeenCalledWith(20);
-      expect(onAfterChange).toHaveBeenCalledWith(20);
     });
 
     it('rtl', () => {
@@ -547,6 +537,26 @@ describe('Slider', () => {
 
       expect(onChange).toHaveBeenCalledWith([20, 20]);
     });
+
+    it('should call onBeforeChange, onChange, and onAfterChange', () => {
+      const onBeforeChange = jest.fn();
+      const onChange = jest.fn();
+      const onAfterChange = jest.fn();
+      const { container } = render(
+        <Slider
+          onBeforeChange={onBeforeChange}
+          onChange={onChange}
+          onAfterChange={onAfterChange}
+        />,
+      );
+      fireEvent.mouseDown(container.querySelector('.rc-slider'), {
+        clientX: 20,
+      });
+
+      expect(onBeforeChange).toHaveBeenCalledWith(20);
+      expect(onChange).toHaveBeenCalledWith(20);
+      expect(onAfterChange).toHaveBeenCalledWith(20);
+    });
   });
 
   it('autoFocus', () => {