diff --git a/src/Slider.tsx b/src/Slider.tsx
index c8d61c65f..e029291ba 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -72,12 +72,12 @@ export interface SliderProps<ValueType = number | number[]> {
   step?: number | null;
   value?: ValueType;
   defaultValue?: ValueType;
-  onChange?: (value: ValueType) => void;
+  onChange?: (value: ValueType, index: number) => void;
   /** @deprecated It's always better to use `onChange` instead */
   onBeforeChange?: (value: ValueType) => void;
   /** @deprecated Use `onChangeComplete` instead */
   onAfterChange?: (value: ValueType) => void;
-  onChangeComplete?: (value: ValueType) => void;
+  onChangeComplete?: (value: ValueType, index: number) => void;
 
   // Cross
   allowCross?: boolean;
@@ -300,7 +300,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
     // Trigger event if needed
     if (onChange && !isEqual(cloneNextValues, rawValues, true)) {
-      onChange(getTriggerValue(cloneNextValues));
+      onChange(getTriggerValue(cloneNextValues), draggingIndex);
     }
 
     // We set this later since it will re-render component immediately
@@ -319,7 +319,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       !onAfterChange,
       '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
     );
-    onChangeComplete?.(finishValue);
+    onChangeComplete?.(finishValue, draggingIndex);
   });
 
   const onDelete = (index: number) => {
@@ -406,7 +406,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
           !onAfterChange,
           '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
         );
-        onChangeComplete?.(nextValue);
+        onChangeComplete?.(nextValue, draggingIndex);
       }
     }
   };
diff --git a/tests/Range.test.tsx b/tests/Range.test.tsx
index e1cc13d2c..5c1674885 100644
--- a/tests/Range.test.tsx
+++ b/tests/Range.test.tsx
@@ -258,7 +258,7 @@ describe('Range', () => {
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
       keyCode: keyCode.UP,
     });
-    expect(onChange).toHaveBeenCalledWith([30, 40]);
+    expect(onChange).toHaveBeenCalledWith([30, 40], -1);
 
     onChange.mockReset();
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
@@ -270,7 +270,7 @@ describe('Range', () => {
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], {
       keyCode: keyCode.UP,
     });
-    expect(onChange).toHaveBeenCalledWith([30, 41]);
+    expect(onChange).toHaveBeenCalledWith([30, 41], -1);
 
     // Push to the edge
     for (let i = 0; i < 99; i += 1) {
@@ -278,7 +278,7 @@ describe('Range', () => {
         keyCode: keyCode.DOWN,
       });
     }
-    expect(onChange).toHaveBeenCalledWith([30, 40]);
+    expect(onChange).toHaveBeenCalledWith([30, 40], -1);
 
     onChange.mockReset();
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], {
@@ -299,7 +299,7 @@ describe('Range', () => {
         keyCode: keyCode.UP,
       });
     }
-    expect(onChange).toHaveBeenCalledWith([80, 90, 100]);
+    expect(onChange).toHaveBeenCalledWith([80, 90, 100], -1);
 
     // Center to Left
     for (let i = 0; i < 99; i += 1) {
@@ -307,7 +307,7 @@ describe('Range', () => {
         keyCode: keyCode.DOWN,
       });
     }
-    expect(onChange).toHaveBeenCalledWith([0, 10, 100]);
+    expect(onChange).toHaveBeenCalledWith([0, 10, 100], -1);
 
     // Right to Right
     for (let i = 0; i < 99; i += 1) {
@@ -315,7 +315,7 @@ describe('Range', () => {
         keyCode: keyCode.DOWN,
       });
     }
-    expect(onChange).toHaveBeenCalledWith([0, 10, 20]);
+    expect(onChange).toHaveBeenCalledWith([0, 10, 20], -1);
 
     // Center to Right
     for (let i = 0; i < 99; i += 1) {
@@ -323,7 +323,7 @@ describe('Range', () => {
         keyCode: keyCode.UP,
       });
     }
-    expect(onChange).toHaveBeenCalledWith([0, 90, 100]);
+    expect(onChange).toHaveBeenCalledWith([0, 90, 100], -1);
   });
 
   describe('should render correctly when allowCross', () => {
@@ -337,7 +337,7 @@ describe('Range', () => {
         // Do move
         func(container);
 
-        expect(onChange).toHaveBeenCalledWith([40, 100]);
+        expect(onChange).toHaveBeenCalledWith([40, 100], 0);
 
         unmount();
       });
@@ -355,7 +355,7 @@ describe('Range', () => {
       // Do move
       doMouseMove(container, 0, -10);
 
-      expect(onChange).toHaveBeenCalledWith([30, 40]);
+      expect(onChange).toHaveBeenCalledWith([30, 40], 0);
     });
 
     it('vertical', () => {
@@ -367,7 +367,7 @@ describe('Range', () => {
       // Do move
       doMouseMove(container, 0, -10);
 
-      expect(onChange).toHaveBeenCalledWith([30, 40]);
+      expect(onChange).toHaveBeenCalledWith([30, 40], 0);
     });
 
     it('vertical & reverse', () => {
@@ -379,7 +379,7 @@ describe('Range', () => {
       // Do move
       doMouseMove(container, 0, -10);
 
-      expect(onChange).toHaveBeenCalledWith([10, 40]);
+      expect(onChange).toHaveBeenCalledWith([10, 40], 0);
     });
   });
 
@@ -433,7 +433,7 @@ describe('Range', () => {
         // Do move
         func(container);
 
-        expect(onChange).toHaveBeenCalledWith([20, 50]);
+        expect(onChange).toHaveBeenCalledWith([20, 50], -1);
 
         unmount();
       });
@@ -663,7 +663,7 @@ describe('Range', () => {
 
       doMouseDown(container, 50, 'rc-slider', true);
 
-      expect(onChange).toHaveBeenCalledWith([0, 50, 100]);
+      expect(onChange).toHaveBeenCalledWith([0, 50, 100], -1);
     });
 
     it('can not editable with draggableTrack at same time', () => {
@@ -692,13 +692,13 @@ describe('Range', () => {
         );
 
         doMouseMove(container, 0, 1000);
-        expect(onChange).toHaveBeenCalledWith([50, 100]);
+        expect(onChange).toHaveBeenCalledWith([50, 100], 0);
 
         expect(container.querySelectorAll('.rc-slider-track')).toHaveLength(1);
 
         // Fire mouse up
         fireEvent.mouseUp(container.querySelector('.rc-slider-handle'));
-        expect(onChangeComplete).toHaveBeenCalledWith([50, 100]);
+        expect(onChangeComplete).toHaveBeenCalledWith([50, 100], 0);
       });
 
       it('out and back', () => {
@@ -716,14 +716,14 @@ describe('Range', () => {
         );
 
         doMouseMove(container, 0, 1000);
-        expect(onChange).toHaveBeenCalledWith([50]);
+        expect(onChange).toHaveBeenCalledWith([50], 0);
 
         doMouseDrag(0);
-        expect(onChange).toHaveBeenCalledWith([0, 50]);
+        expect(onChange).toHaveBeenCalledWith([0, 50], 0);
 
         // Fire mouse up
         fireEvent.mouseUp(container.querySelector('.rc-slider-handle'));
-        expect(onChangeComplete).toHaveBeenCalledWith([0, 50]);
+        expect(onChangeComplete).toHaveBeenCalledWith([0, 50], 0);
       });
 
       it('controlled', () => {
@@ -754,7 +754,7 @@ describe('Range', () => {
 
         // Fire mouse up
         fireEvent.mouseUp(container.querySelector('.rc-slider-handle'));
-        expect(onChangeComplete).toHaveBeenCalledWith([50, 100]);
+        expect(onChangeComplete).toHaveBeenCalledWith([50, 100], 0);
       });
     });
 
@@ -780,7 +780,7 @@ describe('Range', () => {
         keyCode: keyCode.DELETE,
       });
 
-      expect(onChange).toHaveBeenCalledWith([0, 100]);
+      expect(onChange).toHaveBeenCalledWith([0, 100], -1);
 
       // Clear all
       fireEvent.keyDown(container.querySelector('.rc-slider-handle'), {
@@ -789,7 +789,7 @@ describe('Range', () => {
       fireEvent.keyDown(container.querySelector('.rc-slider-handle'), {
         keyCode: keyCode.DELETE,
       });
-      expect(onChange).toHaveBeenCalledWith([]);
+      expect(onChange).toHaveBeenCalledWith([], -1);
 
       // 2 handle
       expect(container.querySelectorAll('.rc-slider-handle')).toHaveLength(0);
@@ -820,7 +820,7 @@ describe('Range', () => {
 
       // Mouse
       doMouseMove(container, 0, 1000);
-      expect(onChange).toHaveBeenCalledWith([100]);
+      expect(onChange).toHaveBeenCalledWith([100], 0);
     });
 
     it('maxCount not add', () => {
@@ -836,7 +836,7 @@ describe('Range', () => {
       );
 
       doMouseDown(container, 50, 'rc-slider', true);
-      expect(onChange).toHaveBeenCalledWith([0, 50]);
+      expect(onChange).toHaveBeenCalledWith([0, 50], -1);
     });
   });
 });
diff --git a/tests/Slider.test.js b/tests/Slider.test.js
index 095080832..43758b24a 100644
--- a/tests/Slider.test.js
+++ b/tests/Slider.test.js
@@ -111,7 +111,7 @@ describe('Slider', () => {
       keyCode: keyCode.UP,
     });
 
-    expect(onChange).toHaveBeenCalledWith(51);
+    expect(onChange).toHaveBeenCalledWith(51, -1);
   });
 
   it('decreases the value for reverse-vertical when key "up" is pressed', () => {
@@ -122,7 +122,7 @@ describe('Slider', () => {
       keyCode: keyCode.UP,
     });
 
-    expect(onChange).toHaveBeenCalledWith(49);
+    expect(onChange).toHaveBeenCalledWith(49, -1);
   });
 
   it('increases the value when key "right" is pressed', () => {
@@ -133,7 +133,7 @@ describe('Slider', () => {
       keyCode: keyCode.RIGHT,
     });
 
-    expect(onChange).toHaveBeenCalledWith(51);
+    expect(onChange).toHaveBeenCalledWith(51, -1);
   });
 
   it('it should trigger onAfterChange when key pressed', () => {
@@ -161,7 +161,7 @@ describe('Slider', () => {
       keyCode: keyCode.RIGHT,
     });
 
-    expect(onChange).toHaveBeenCalledWith(49);
+    expect(onChange).toHaveBeenCalledWith(49, -1);
   });
 
   it('increases the value when key "page up" is pressed, by a factor 2', () => {
@@ -172,7 +172,7 @@ describe('Slider', () => {
       keyCode: keyCode.PAGE_UP,
     });
 
-    expect(onChange).toHaveBeenCalledWith(52);
+    expect(onChange).toHaveBeenCalledWith(52, -1);
   });
 
   it('decreases the value when key "down" is pressed', () => {
@@ -183,7 +183,7 @@ describe('Slider', () => {
       keyCode: keyCode.DOWN,
     });
 
-    expect(onChange).toHaveBeenCalledWith(49);
+    expect(onChange).toHaveBeenCalledWith(49, -1);
   });
 
   it('decreases the value when key "left" is pressed', () => {
@@ -197,7 +197,7 @@ describe('Slider', () => {
       keyCode: keyCode.LEFT,
     });
 
-    expect(onChange).toHaveBeenCalledWith(49);
+    expect(onChange).toHaveBeenCalledWith(49, -1);
     expect(onChangeComplete).not.toHaveBeenCalled();
 
     fireEvent.keyUp(container.getElementsByClassName('rc-slider-handle')[0], {
@@ -214,22 +214,22 @@ describe('Slider', () => {
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], {
       keyCode: keyCode.LEFT,
     });
-    expect(onChange).toHaveBeenCalledWith([20, 49]);
+    expect(onChange).toHaveBeenCalledWith([20, 49], -1);
 
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], {
       keyCode: keyCode.RIGHT,
     });
-    expect(onChange).toHaveBeenCalledWith([20, 50]);
+    expect(onChange).toHaveBeenCalledWith([20, 50], -1);
 
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], {
       keyCode: keyCode.UP,
     });
-    expect(onChange).toHaveBeenCalledWith([20, 51]);
+    expect(onChange).toHaveBeenCalledWith([20, 51], -1);
 
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[1], {
       keyCode: keyCode.DOWN,
     });
-    expect(onChange).toHaveBeenCalledWith([20, 50]);
+    expect(onChange).toHaveBeenCalledWith([20, 50], -1);
   });
 
   it('decreases the value when key "page down" is pressed, by a factor 2', () => {
@@ -240,7 +240,7 @@ describe('Slider', () => {
       keyCode: keyCode.PAGE_DOWN,
     });
 
-    expect(onChange).toHaveBeenCalledWith(48);
+    expect(onChange).toHaveBeenCalledWith(48, -1);
   });
 
   it('sets the value to minimum when key "home" is pressed', () => {
@@ -251,7 +251,7 @@ describe('Slider', () => {
       keyCode: keyCode.HOME,
     });
 
-    expect(onChange).toHaveBeenCalledWith(0);
+    expect(onChange).toHaveBeenCalledWith(0, -1);
   });
 
   it('sets the value to maximum when the key "end" is pressed', () => {
@@ -262,7 +262,7 @@ describe('Slider', () => {
       keyCode: keyCode.END,
     });
 
-    expect(onChange).toHaveBeenCalledWith(100);
+    expect(onChange).toHaveBeenCalledWith(100, -1);
   });
 
   describe('when component has fixed values', () => {
@@ -280,7 +280,7 @@ describe('Slider', () => {
       fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
         keyCode: keyCode.UP,
       });
-      expect(onChange).toHaveBeenCalledWith(100);
+      expect(onChange).toHaveBeenCalledWith(100, -1);
     });
 
     it('increases the value when key "right" is pressed', () => {
@@ -297,7 +297,7 @@ describe('Slider', () => {
       fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
         keyCode: keyCode.RIGHT,
       });
-      expect(onChange).toHaveBeenCalledWith(100);
+      expect(onChange).toHaveBeenCalledWith(100, -1);
     });
 
     it('decreases the value when key "down" is pressed', () => {
@@ -314,7 +314,7 @@ describe('Slider', () => {
       fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
         keyCode: keyCode.DOWN,
       });
-      expect(onChange).toHaveBeenCalledWith(20);
+      expect(onChange).toHaveBeenCalledWith(20, -1);
     });
 
     it('decreases the value when key "left" is pressed', () => {
@@ -331,7 +331,7 @@ describe('Slider', () => {
       fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
         keyCode: keyCode.LEFT,
       });
-      expect(onChange).toHaveBeenCalledWith(20);
+      expect(onChange).toHaveBeenCalledWith(20, -1);
     });
 
     it('sets the value to minimum when key "home" is pressed', () => {
@@ -348,7 +348,7 @@ describe('Slider', () => {
       fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
         keyCode: keyCode.HOME,
       });
-      expect(onChange).toHaveBeenCalledWith(20);
+      expect(onChange).toHaveBeenCalledWith(20, -1);
     });
 
     it('sets the value to maximum when the key "end" is pressed', () => {
@@ -365,7 +365,7 @@ describe('Slider', () => {
       fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
         keyCode: keyCode.END,
       });
-      expect(onChange).toHaveBeenCalledWith(100);
+      expect(onChange).toHaveBeenCalledWith(100, -1);
     });
   });
 
@@ -387,17 +387,17 @@ describe('Slider', () => {
 
     // 0, [3], 7, 10
     fireEvent.keyDown(handler, { keyCode: keyCode.UP });
-    expect(onChange).toHaveBeenCalledWith(3);
+    expect(onChange).toHaveBeenCalledWith(3, -1);
 
     // 0, 3, [7], 10
     onChange.mockReset();
     fireEvent.keyDown(handler, { keyCode: keyCode.UP });
-    expect(onChange).toHaveBeenCalledWith(7);
+    expect(onChange).toHaveBeenCalledWith(7, -1);
 
     // 0, 3, 7, [10]
     onChange.mockReset();
     fireEvent.keyDown(handler, { keyCode: keyCode.UP });
-    expect(onChange).toHaveBeenCalledWith(10);
+    expect(onChange).toHaveBeenCalledWith(10, -1);
 
     // 0, 3, 7, [10]
     onChange.mockReset();
@@ -407,17 +407,17 @@ describe('Slider', () => {
     // 0, 3, [7], 10
     onChange.mockReset();
     fireEvent.keyDown(handler, { keyCode: keyCode.DOWN });
-    expect(onChange).toHaveBeenCalledWith(7);
+    expect(onChange).toHaveBeenCalledWith(7, -1);
 
     // 0, [3], 7, 10
     onChange.mockReset();
     fireEvent.keyDown(handler, { keyCode: keyCode.DOWN });
-    expect(onChange).toHaveBeenCalledWith(3);
+    expect(onChange).toHaveBeenCalledWith(3, -1);
 
     // [0], 3, 7, 10
     onChange.mockReset();
     fireEvent.keyDown(handler, { keyCode: keyCode.DOWN });
-    expect(onChange).toHaveBeenCalledWith(0);
+    expect(onChange).toHaveBeenCalledWith(0, -1);
 
     // [0], 3, 7, 10
     onChange.mockReset();
@@ -519,7 +519,7 @@ describe('Slider', () => {
         clientX: 20,
       });
 
-      expect(onChange).toHaveBeenCalledWith(20);
+      expect(onChange).toHaveBeenCalledWith(20, -1);
     });
 
     it('rtl', () => {
@@ -529,7 +529,7 @@ describe('Slider', () => {
         clientX: 20,
       });
 
-      expect(onChange).toHaveBeenCalledWith(80);
+      expect(onChange).toHaveBeenCalledWith(80, -1);
     });
 
     it('btt', () => {
@@ -539,7 +539,7 @@ describe('Slider', () => {
         clientY: 93,
       });
 
-      expect(onChange).toHaveBeenCalledWith(7);
+      expect(onChange).toHaveBeenCalledWith(7, -1);
     });
 
     it('ttb', () => {
@@ -549,7 +549,7 @@ describe('Slider', () => {
         clientY: 93,
       });
 
-      expect(onChange).toHaveBeenCalledWith(93);
+      expect(onChange).toHaveBeenCalledWith(93, -1);
     });
 
     it('null value click to become 2 values', () => {
@@ -559,7 +559,7 @@ describe('Slider', () => {
         clientX: 20,
       });
 
-      expect(onChange).toHaveBeenCalledWith([20, 20]);
+      expect(onChange).toHaveBeenCalledWith([20, 20], -1);
     });
 
     it('should call onBeforeChange, onChange, and onAfterChange', () => {
@@ -578,12 +578,12 @@ describe('Slider', () => {
       });
 
       expect(onBeforeChange).toHaveBeenCalledWith(20);
-      expect(onChange).toHaveBeenCalledWith(20);
+      expect(onChange).toHaveBeenCalledWith(20, -1);
       expect(onAfterChange).not.toHaveBeenCalled();
       fireEvent.mouseUp(container.querySelector('.rc-slider'), {
         clientX: 20,
       });
-      expect(onAfterChange).toHaveBeenCalledWith(20);
+      expect(onAfterChange).toHaveBeenCalledWith(20, 0);
     });
   });
 
@@ -616,7 +616,7 @@ describe('Slider', () => {
     );
     fireEvent.keyDown(container.querySelector('.rc-slider-handle'), { keyCode: keyCode.RIGHT });
 
-    expect(onChange).toHaveBeenCalledWith(2);
+    expect(onChange).toHaveBeenCalledWith(2, -1);
     expect(container.querySelector('.rc-slider-handle').style.left).toBe('100%');
   });
 
@@ -626,7 +626,7 @@ describe('Slider', () => {
       <Slider min={0} max={1} step={0.01} defaultValue={0.81} onChange={onChange} />,
     );
     fireEvent.keyDown(container.querySelector('.rc-slider-handle'), { keyCode: keyCode.RIGHT });
-    expect(onChange).toHaveBeenCalledWith(0.82);
+    expect(onChange).toHaveBeenCalledWith(0.82, -1);
   });
 
   it('onAfterChange should return number', () => {
@@ -639,7 +639,7 @@ describe('Slider', () => {
     fireEvent.mouseUp(container.querySelector('.rc-slider'), {
       clientX: 20,
     });
-    expect(onAfterChange).toHaveBeenCalledWith(20);
+    expect(onAfterChange).toHaveBeenCalledWith(20, 0);
   });
 
   // https://github.com/react-component/slider/pull/948
@@ -649,13 +649,13 @@ describe('Slider', () => {
     fireEvent.mouseDown(container.querySelector('.rc-slider'), {
       clientX: 20,
     });
-    expect(onChange).toHaveBeenLastCalledWith(20);
+    expect(onChange).toHaveBeenLastCalledWith(20, -1);
 
     // Drag
     const mouseMove = createEvent.mouseMove(document);
     mouseMove.pageX = 100;
     fireEvent(document, mouseMove);
-    expect(onChange).toHaveBeenLastCalledWith(100);
+    expect(onChange).toHaveBeenLastCalledWith(100, 0);
   });
 
   it('should render Slider with included=false', () => {
@@ -665,7 +665,7 @@ describe('Slider', () => {
 
   it('tipFormatter should not crash with undefined value', () => {
     [undefined, null].forEach((value) => {
-      render(<Slider value={value} tooltip={{ open: true }} styles={{ tracks: {} }}/>);
+      render(<Slider value={value} tooltip={{ open: true }} styles={{ tracks: {} }} />);
     });
   });
 });
diff --git a/tests/marks.test.js b/tests/marks.test.js
index 56e342654..f064ae0e0 100644
--- a/tests/marks.test.js
+++ b/tests/marks.test.js
@@ -37,16 +37,18 @@ describe('marks', () => {
     const marks = { 0: '0', 30: '30', 100: '100' };
     const onChange = jest.fn();
     const onChangeComplete = jest.fn();
-    const { container } = render(<Slider marks={marks} onChange={onChange} onChangeComplete={onChangeComplete} />);
+    const { container } = render(
+      <Slider marks={marks} onChange={onChange} onChangeComplete={onChangeComplete} />,
+    );
     fireEvent.click(container.getElementsByClassName('rc-slider-mark-text')[1]);
     expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
       'aria-valuenow',
       '30',
     );
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(30);
+    expect(onChange).toHaveBeenCalledWith(30, -1);
     expect(onChangeComplete).toHaveBeenCalledTimes(1);
-    expect(onChangeComplete).toHaveBeenCalledWith(30);
+    expect(onChangeComplete).toHaveBeenCalledWith(30, -1);
   });
 
   // TODO: not implement yet