diff --git a/.gitignore b/.gitignore
index 5289a2524..3e17f2420 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,6 +31,7 @@ yarn.lock
 package-lock.json
 .doc
 .storybook
+.vscode
 
 # umi
 .umi
diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx
index 262a72c9a..7c15ccd84 100644
--- a/docs/examples/range.tsx
+++ b/docs/examples/range.tsx
@@ -193,7 +193,7 @@ export default () => (
     </div>
     <div style={style}>
       <p>Basic Range，`step=20` </p>
-      <Slider range step={20} defaultValue={[20, 20]} onBeforeChange={log} />
+      <Slider range step={20} defaultValue={[20, 20]} onChange={log} />
     </div>
     <div style={style}>
       <p>Basic Range，`step=20, dots` </p>
@@ -217,18 +217,22 @@ export default () => (
     </div>
     <div style={style}>
       <p>Multi Range, count=3 and pushable=true</p>
-      <Slider range count={3} defaultValue={[20, 40, 60, 80]} pushable />
+      <Slider range={{ minCount: 3 }} defaultValue={[20, 40, 60, 80]} pushable />
     </div>
     <div style={style}>
       <p>Multi Range with custom track and handle style and pushable</p>
       <Slider
-        range
-        count={3}
+        range={{ minCount: 3 }}
         defaultValue={[20, 40, 60, 80]}
         pushable
-        trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
-        handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
-        railStyle={{ backgroundColor: 'black' }}
+        styles={{
+          track: { backgroundColor: 'red' },
+          handle: { backgroundColor: 'yellow' },
+          rail: { backgroundColor: 'black' },
+        }}
+      // trackStyle={[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]}
+      // handleStyle={[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]}
+      // railStyle={{ backgroundColor: 'black' }}
       />
     </div>
     <div style={style}>
diff --git a/docs/examples/slider.tsx b/docs/examples/slider.tsx
index 31fc9e8ce..66f8c4203 100644
--- a/docs/examples/slider.tsx
+++ b/docs/examples/slider.tsx
@@ -198,7 +198,7 @@ export default () => (
     </div>
     <div style={style}>
       <p>Basic Slider，`step=20`</p>
-      <Slider step={20} defaultValue={50} onBeforeChange={log} />
+      <Slider step={20} defaultValue={50} onChange={log} />
     </div>
     <div style={style}>
       <p>Basic Slider，`step=20, dots`</p>
@@ -232,15 +232,17 @@ export default () => (
       </p>
       <Slider
         defaultValue={30}
-        railStyle={{ backgroundColor: 'red', height: 10 }}
-        trackStyle={{ backgroundColor: 'blue', height: 10 }}
-        handleStyle={{
-          borderColor: 'blue',
-          height: 28,
-          width: 28,
-          marginLeft: -14,
-          marginTop: -9,
-          backgroundColor: 'black',
+        styles={{
+          rail: { backgroundColor: 'red', height: 10 },
+          track: { backgroundColor: 'blue', height: 10 },
+          handle: {
+            borderColor: 'blue',
+            height: 28,
+            width: 28,
+            marginLeft: -14,
+            marginTop: -9,
+            backgroundColor: 'black',
+          },
         }}
       />
     </div>
@@ -250,16 +252,18 @@ export default () => (
       </p>
       <Slider
         defaultValue={30}
-        trackStyle={{ backgroundColor: 'blue', height: 10 }}
-        handleStyle={{
-          borderColor: 'blue',
-          height: 28,
-          width: 28,
-          marginLeft: -14,
-          marginTop: -9,
-          backgroundColor: 'black',
+        styles={{
+          track: { backgroundColor: 'blue', height: 10 },
+          handle: {
+            borderColor: 'blue',
+            height: 28,
+            width: 28,
+            marginLeft: -14,
+            marginTop: -9,
+            backgroundColor: 'black',
+          },
+          rail: { backgroundColor: 'red', height: 10 },
         }}
-        railStyle={{ backgroundColor: 'red', height: 10 }}
       />
     </div>
     <div style={style}>
@@ -269,17 +273,19 @@ export default () => (
       </p>
       <Slider
         defaultValue={30}
-        trackStyle={{ backgroundColor: 'blue', height: 10 }}
         reverse
-        handleStyle={{
-          borderColor: 'blue',
-          height: 28,
-          width: 28,
-          marginLeft: -14,
-          marginTop: -9,
-          backgroundColor: 'black',
+        styles={{
+          track: { backgroundColor: 'blue', height: 10 },
+          handle: {
+            borderColor: 'blue',
+            height: 28,
+            width: 28,
+            marginLeft: -14,
+            marginTop: -9,
+            backgroundColor: 'black',
+          },
+          rail: { backgroundColor: 'red', height: 10 },
         }}
-        railStyle={{ backgroundColor: 'red', height: 10 }}
       />
     </div>
     <div style={style}>
diff --git a/src/Slider.tsx b/src/Slider.tsx
index c8d61c65f..bf899c7ea 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -65,18 +65,12 @@ export interface SliderProps<ValueType = number | number[]> {
 
   // Value
   range?: boolean | RangeConfig;
-  /** @deprecated Use `range.minCount` or `range.maxCount` to handle this */
-  count?: number;
   min?: number;
   max?: number;
   step?: number | null;
   value?: ValueType;
   defaultValue?: ValueType;
   onChange?: (value: ValueType) => 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;
 
   // Cross
@@ -90,12 +84,6 @@ export interface SliderProps<ValueType = number | number[]> {
   // Style
   included?: boolean;
   startPoint?: number;
-  /** @deprecated Please use `styles.track` instead */
-  trackStyle?: React.CSSProperties | React.CSSProperties[];
-  /** @deprecated Please use `styles.handle` instead */
-  handleStyle?: React.CSSProperties | React.CSSProperties[];
-  /** @deprecated Please use `styles.rail` instead */
-  railStyle?: React.CSSProperties;
   dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
   activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
 
@@ -145,10 +133,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     value,
     defaultValue,
     range,
-    count,
     onChange,
-    onBeforeChange,
-    onAfterChange,
     onChangeComplete,
 
     // Cross
@@ -162,9 +147,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     // Style
     included = true,
     startPoint,
-    trackStyle,
-    handleStyle,
-    railStyle,
     dotStyle,
     activeDotStyle,
 
@@ -259,8 +241,8 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       mergedValue === null || mergedValue === undefined
         ? []
         : Array.isArray(mergedValue)
-        ? mergedValue
-        : [mergedValue];
+          ? mergedValue
+          : [mergedValue];
 
     const [val0 = mergedMin] = valueList;
     let returnValues = mergedValue === null ? [] : [val0];
@@ -269,16 +251,11 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     if (rangeEnabled) {
       returnValues = [...valueList];
 
-      // When count provided or value is `undefined`, we fill values
-      if (count || mergedValue === undefined) {
-        const pointCount = count >= 0 ? count + 1 : 2;
-        returnValues = returnValues.slice(0, pointCount);
-
-        // Fill with count
-        while (returnValues.length < pointCount) {
-          returnValues.push(returnValues[returnValues.length - 1] ?? mergedMin);
-        }
+      // When value is `undefined`, we fill values with default 2 points
+      if (mergedValue === undefined) {
+        returnValues = [mergedMin, mergedMin];
       }
+
       returnValues.sort((a, b) => a - b);
     }
 
@@ -288,7 +265,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     });
 
     return returnValues;
-  }, [mergedValue, rangeEnabled, mergedMin, count, formatValue]);
+  }, [mergedValue, rangeEnabled, mergedMin, formatValue]);
 
   // =========================== onChange ===========================
   const getTriggerValue = (triggerValues: number[]) =>
@@ -314,11 +291,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     }
 
     const finishValue = getTriggerValue(rawValues);
-    onAfterChange?.(finishValue);
-    warning(
-      !onAfterChange,
-      '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
-    );
     onChangeComplete?.(finishValue);
   });
 
@@ -330,7 +302,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     const cloneNextValues = [...rawValues];
     cloneNextValues.splice(index, 1);
 
-    onBeforeChange?.(getTriggerValue(cloneNextValues));
     triggerChange(cloneNextValues);
 
     const nextFocusIndex = Math.max(0, index - 1);
@@ -386,13 +357,11 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
         cloneNextValues[valueIndex] = newValue;
       }
 
-      // Fill value to match default 2 (only when `rawValues` is empty)
-      if (rangeEnabled && !rawValues.length && count === undefined) {
+      if (rangeEnabled && !rawValues.length) {
         cloneNextValues.push(newValue);
       }
 
       const nextValue = getTriggerValue(cloneNextValues);
-      onBeforeChange?.(nextValue);
       triggerChange(cloneNextValues);
 
       if (e) {
@@ -400,12 +369,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
         handlesRef.current.focus(focusIndex);
         onStartDrag(e, focusIndex, cloneNextValues);
       } else {
-        // https://github.com/ant-design/ant-design/issues/49997
-        onAfterChange?.(nextValue);
-        warning(
-          !onAfterChange,
-          '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
-        );
         onChangeComplete?.(nextValue);
       }
     }
@@ -448,7 +411,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     if (!disabled) {
       const next = offsetValues(rawValues, offset, valueIndex);
 
-      onBeforeChange?.(getTriggerValue(rawValues));
       triggerChange(next.values);
 
       setKeyboardValue(next.value);
@@ -479,8 +441,6 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
 
   const onStartMove: OnStartMove = useEvent((e, valueIndex) => {
     onStartDrag(e, valueIndex);
-
-    onBeforeChange?.(getTriggerValue(rawValues));
   });
 
   // Auto focus for updated handle
@@ -587,13 +547,13 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
       >
         <div
           className={cls(`${prefixCls}-rail`, classNames?.rail)}
-          style={{ ...railStyle, ...styles?.rail }}
+          style={styles?.rail}
         />
 
         {track !== false && (
           <Tracks
             prefixCls={prefixCls}
-            style={trackStyle}
+            style={styles?.track}
             values={rawValues}
             startPoint={startPoint}
             onStartMove={mergedDraggableTrack ? onStartMove : undefined}
@@ -611,7 +571,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
         <Handles
           ref={handlesRef}
           prefixCls={prefixCls}
-          style={handleStyle}
+          style={styles?.handle}
           values={cacheValues}
           draggingIndex={draggingIndex}
           draggingDelete={draggingDelete}
diff --git a/tests/Range.test.tsx b/tests/Range.test.tsx
index e1cc13d2c..76b7d8272 100644
--- a/tests/Range.test.tsx
+++ b/tests/Range.test.tsx
@@ -99,11 +99,6 @@ describe('Range', () => {
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
-  it('should render Multi-Range with correct DOM structure', () => {
-    const { asFragment } = render(<Slider range count={3} />);
-    expect(asFragment().firstChild).toMatchSnapshot();
-  });
-
   it('should render Range with value correctly', async () => {
     const { container } = render(<Slider range value={[0, 50]} />);
 
@@ -173,11 +168,11 @@ describe('Range', () => {
       keyCode: keyCode.RIGHT,
     });
 
-    expect(onAfterChange).not.toBeCalled();
+    expect(onAfterChange).not.toHaveBeenCalled();
   });
 
   it('should render Multi-Range with value correctly', () => {
-    const { container } = render(<Slider range count={3} value={[0, 25, 50, 75]} />);
+    const { container } = render(<Slider range value={[0, 25, 50, 75]} />);
 
     expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveStyle('left: 0%');
     expect(container.getElementsByClassName('rc-slider-handle')[1]).toHaveStyle('left: 25%');
@@ -558,7 +553,7 @@ describe('Range', () => {
       const handleFocus = jest.fn();
       const { container } = render(<Slider range min={0} max={20} onFocus={handleFocus} />);
       container.querySelector<HTMLDivElement>('.rc-slider-handle').focus();
-      expect(handleFocus).toBeCalled();
+      expect(handleFocus).toHaveBeenCalled();
     });
 
     it('blur()', () => {
diff --git a/tests/Slider.test.js b/tests/Slider.test.js
index 095080832..6de299b55 100644
--- a/tests/Slider.test.js
+++ b/tests/Slider.test.js
@@ -562,28 +562,22 @@ describe('Slider', () => {
       expect(onChange).toHaveBeenCalledWith([20, 20]);
     });
 
-    it('should call onBeforeChange, onChange, and onAfterChange', () => {
-      const onBeforeChange = jest.fn();
+    it('should call onChange', () => {
       const onChange = jest.fn();
-      const onAfterChange = jest.fn();
       const { container } = render(
         <Slider
-          onBeforeChange={onBeforeChange}
           onChange={onChange}
-          onChangeComplete={onAfterChange}
         />,
       );
       fireEvent.mouseDown(container.querySelector('.rc-slider'), {
         clientX: 20,
       });
 
-      expect(onBeforeChange).toHaveBeenCalledWith(20);
       expect(onChange).toHaveBeenCalledWith(20);
-      expect(onAfterChange).not.toHaveBeenCalled();
       fireEvent.mouseUp(container.querySelector('.rc-slider'), {
         clientX: 20,
       });
-      expect(onAfterChange).toHaveBeenCalledWith(20);
+      expect(onChange).toHaveBeenCalledWith(20);
     });
   });
 
@@ -665,7 +659,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/common.test.js b/tests/common.test.js
index 23d417af4..2498b7ac9 100644
--- a/tests/common.test.js
+++ b/tests/common.test.js
@@ -341,47 +341,4 @@ describe('Common', () => {
     expect(sliderOnAfterChange).toHaveBeenCalled();
     expect(sliderOnAfterChange).toHaveBeenCalledTimes(1);
   });
-
-  it('deprecate onAfterChange', () => {
-    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const onChangeComplete = jest.fn();
-    const onAfterChange = jest.fn();
-    const { container } = render(
-      <Slider value={0} onChangeComplete={onChangeComplete} onAfterChange={onAfterChange} />,
-    );
-
-    fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
-      keyCode: KeyCode.UP,
-    });
-
-    expect(onChangeComplete).not.toHaveBeenCalled();
-    expect(onAfterChange).not.toHaveBeenCalled();
-
-    fireEvent.keyUp(container.getElementsByClassName('rc-slider-handle')[0], {
-      keyCode: KeyCode.UP,
-    });
-    expect(onChangeComplete).toHaveBeenCalledTimes(1);
-    expect(onAfterChange).toHaveBeenCalledTimes(1);
-    expect(errSpy).toHaveBeenCalledWith(
-      'Warning: [rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
-    );
-    errSpy.mockRestore();
-  });
-
-  // Move to antd instead
-  // it('the tooltip should be attach to the container with the id tooltip', () => {
-  //   const SliderWithTooltip = createSliderWithTooltip(Slider);
-  //   const tooltipPrefixer = {
-  //     prefixCls: 'slider-tooltip',
-  //   };
-  //   const tooltipParent = document.createElement('div');
-  //   tooltipParent.setAttribute('id', 'tooltip');
-  //   const { container } = render(
-  //     <SliderWithTooltip
-  //       tipProps={tooltipPrefixer}
-  //       getTooltipContainer={() => document.getElementById('tooltip')}
-  //     />,
-  //   );
-  //   expect(wrapper.instance().props.getTooltipContainer).toBeTruthy();
-  // });
 });