diff --git a/docs/examples/components/TooltipSlider.tsx b/docs/examples/components/TooltipSlider.tsx
index 201946e85..79db7ba25 100644
--- a/docs/examples/components/TooltipSlider.tsx
+++ b/docs/examples/components/TooltipSlider.tsx
@@ -1,19 +1,22 @@
-import * as React from 'react';
-import 'rc-tooltip/assets/bootstrap.css';
-import Slider from 'rc-slider';
 import type { SliderProps } from 'rc-slider';
-import raf from 'rc-util/lib/raf';
+import Slider from 'rc-slider';
+import type { TooltipRef } from 'rc-tooltip';
 import Tooltip from 'rc-tooltip';
+import 'rc-tooltip/assets/bootstrap.css';
+import raf from 'rc-util/lib/raf';
+import * as React from 'react';
 
-const HandleTooltip = (props: {
+interface HandleTooltipProps {
   value: number;
   children: React.ReactElement;
   visible: boolean;
   tipFormatter?: (value: number) => React.ReactNode;
-}) => {
+}
+
+const HandleTooltip: React.FC<HandleTooltipProps> = (props) => {
   const { value, children, visible, tipFormatter = (val) => `${val} %`, ...restProps } = props;
 
-  const tooltipRef = React.useRef<any>();
+  const tooltipRef = React.useRef<TooltipRef>();
   const rafRef = React.useRef<number | null>(null);
 
   function cancelKeepAlign() {
@@ -50,31 +53,28 @@ const HandleTooltip = (props: {
   );
 };
 
-export const handleRender: SliderProps['handleRender'] = (node, props) => {
-  return (
-    <HandleTooltip value={props.value} visible={props.dragging}>
+export const handleRender: SliderProps['handleRender'] = (node, props) => (
+  <HandleTooltip value={props.value} visible={props.dragging}>
+    {node}
+  </HandleTooltip>
+);
+
+interface TooltipSliderProps extends SliderProps {
+  tipFormatter?: (value: number) => React.ReactNode;
+  tipProps?: any;
+}
+
+const TooltipSlider: React.FC<TooltipSliderProps> = ({ tipFormatter, tipProps, ...props }) => {
+  const tipHandleRender: SliderProps['handleRender'] = (node, handleProps) => (
+    <HandleTooltip
+      value={handleProps.value}
+      visible={handleProps.dragging}
+      tipFormatter={tipFormatter}
+      {...tipProps}
+    >
       {node}
     </HandleTooltip>
   );
-};
-
-const TooltipSlider = ({
-  tipFormatter,
-  tipProps,
-  ...props
-}: SliderProps & { tipFormatter?: (value: number) => React.ReactNode; tipProps: any }) => {
-  const tipHandleRender: SliderProps['handleRender'] = (node, handleProps) => {
-    return (
-      <HandleTooltip
-        value={handleProps.value}
-        visible={handleProps.dragging}
-        tipFormatter={tipFormatter}
-        {...tipProps}
-      >
-        {node}
-      </HandleTooltip>
-    );
-  };
 
   return <Slider {...props} handleRender={tipHandleRender} />;
 };
diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
index eb9a46b1d..31857d50d 100644
--- a/docs/examples/debug.tsx
+++ b/docs/examples/debug.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 
 export default () => {
@@ -7,15 +7,9 @@ export default () => {
   const [range, setRange] = React.useState(false);
   const [reverse, setReverse] = React.useState(false);
   const [vertical, setVertical] = React.useState(false);
-  const [value, setValue] = React.useState(30);
 
   return (
-    <div
-      style={{
-        transform: 'scale(1.5)',
-        transformOrigin: 'top left',
-      }}
-    >
+    <div style={{ transform: 'scale(1.5)', transformOrigin: 'top left' }}>
       <div>
         <label>
           <input type="checkbox" checked={disabled} onChange={() => setDisabled(!disabled)} />
@@ -37,26 +31,12 @@ export default () => {
 
       <div style={{ height: 300, width: 600 }}>
         <Slider
-          // count={2}
-          // disabled={disabled}
-          // reverse={reverse}
-          // vertical={vertical}
-          // range={range}
-          // defaultValue={[30, 50]}
-          // dots
-          // step={5}
-          // draggableTrack
-          // pushable={5}
-          // allowCross={false}
           onChange={(nextValues) => {
             console.log('Change:', nextValues);
-          //   setValue(nextValues as any);
           }}
           onChangeComplete={(v) => {
             console.log('AfterChange:', v);
           }}
-          // value={value}
-
           min={0}
           max={1}
           defaultValue={0.81}
diff --git a/docs/examples/handle.tsx b/docs/examples/handle.tsx
index 7313efeef..fc38d15c0 100644
--- a/docs/examples/handle.tsx
+++ b/docs/examples/handle.tsx
@@ -1,9 +1,12 @@
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 import TooltipSlider, { handleRender } from './components/TooltipSlider';
 
-const wrapperStyle = { width: 400, margin: 50 };
+const wrapperStyle: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
 
 export default () => (
   <div>
diff --git a/docs/examples/marks.tsx b/docs/examples/marks.tsx
index f13a28244..42320a136 100644
--- a/docs/examples/marks.tsx
+++ b/docs/examples/marks.tsx
@@ -1,8 +1,12 @@
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 
-const style = { width: 400, margin: 50 };
+const style: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
+
 const marks = {
   '-10': '-10°C',
   0: <strong>0°C</strong>,
@@ -25,7 +29,14 @@ export default () => (
   <div>
     <div style={style}>
       <p>Slider with marks, `step=null`</p>
-      <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} onChangeComplete={(v) => console.log('AfterChange:', v)} />
+      <Slider
+        min={-10}
+        marks={marks}
+        step={null}
+        onChange={log}
+        defaultValue={20}
+        onChangeComplete={(v) => console.log('AfterChange:', v)}
+      />
     </div>
 
     <div style={style}>
diff --git a/docs/examples/multiple.tsx b/docs/examples/multiple.tsx
index baca5e0cb..2b251ba3e 100644
--- a/docs/examples/multiple.tsx
+++ b/docs/examples/multiple.tsx
@@ -3,7 +3,10 @@ import Slider from 'rc-slider';
 import React from 'react';
 import '../../assets/index.less';
 
-const style = { width: 400, margin: 50 };
+const style: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
 
 function log(value) {
   console.log(value);
diff --git a/docs/examples/range.tsx b/docs/examples/range.tsx
index 45edab9d8..56d80d3be 100644
--- a/docs/examples/range.tsx
+++ b/docs/examples/range.tsx
@@ -1,9 +1,12 @@
 /* eslint react/no-multi-comp: 0, no-console: 0 */
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 
-const style = { width: 400, margin: 50 };
+const style: React.CSSProperties = {
+  width: 400,
+  margin: 50,
+};
 
 function log(value) {
   console.log(value); //eslint-disable-line
diff --git a/docs/examples/slider.tsx b/docs/examples/slider.tsx
index ccfc7b56d..31fc9e8ce 100644
--- a/docs/examples/slider.tsx
+++ b/docs/examples/slider.tsx
@@ -1,10 +1,13 @@
 /* eslint react/no-multi-comp: 0, max-len: 0 */
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 import TooltipSlider from './components/TooltipSlider';
 
-const style = { width: 600, margin: 50 };
+const style: React.CSSProperties = {
+  width: 600,
+  margin: 50,
+};
 
 function log(value) {
   console.log(value); //eslint-disable-line
diff --git a/docs/examples/vertical.tsx b/docs/examples/vertical.tsx
index 7c662d3f4..ce2272b2a 100644
--- a/docs/examples/vertical.tsx
+++ b/docs/examples/vertical.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import Slider from 'rc-slider';
+import React from 'react';
 import '../../assets/index.less';
 
 const style: React.CSSProperties = {
@@ -9,7 +9,10 @@ const style: React.CSSProperties = {
   marginBottom: 160,
   marginLeft: 50,
 };
-const parentStyle = { overflow: 'hidden' };
+
+const parentStyle: React.CSSProperties = {
+  overflow: 'hidden',
+};
 
 const marks = {
   '-10': '-10°C',
diff --git a/package.json b/package.json
index 898654835..07898f058 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,6 @@
   "name": "rc-slider",
   "version": "10.5.0",
   "description": "Slider UI component for React",
-  "engines": {
-    "node": ">=8.x"
-  },
   "keywords": [
     "react",
     "react-component",
@@ -14,38 +11,34 @@
     "range"
   ],
   "homepage": "http://github.com/react-component/slider/",
+  "bugs": {
+    "url": "http://github.com/react-component/slider/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git@github.com:react-component/slider.git"
   },
-  "bugs": {
-    "url": "http://github.com/react-component/slider/issues"
-  },
+  "license": "MIT",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "types": "./lib/index.d.ts",
+  "style": "./assets/index.css",
   "files": [
     "assets/*.css",
     "lib",
     "es"
   ],
-  "license": "MIT",
-  "main": "./lib/index",
-  "module": "./es/index",
-  "style": "./assets/index.css",
-  "types": "./lib/index.d.ts",
   "scripts": {
-    "start": "dumi dev",
+    "compile": "father build && lessc assets/index.less assets/index.css",
+    "coverage": "rc-test --coverage",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
-    "compile": "father build && lessc assets/index.less assets/index.css",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "now-build": "npm run docs:build",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "rc-test",
-    "coverage": "rc-test --coverage",
-    "now-build": "npm run docs:build"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "start": "dumi dev",
+    "test": "rc-test"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
@@ -58,14 +51,14 @@
     "@testing-library/react": "^12.1.3",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.1",
-    "@types/react": "^17.0.15",
+    "@types/react": "^18.2.42",
     "@types/react-dom": "^18.0.11",
     "@umijs/fabric": "^4.0.1",
     "cross-env": "^7.0.0",
+    "dumi": "^2.2.10",
     "eslint": "^8.54.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-unicorn": "^49.0.0",
-    "dumi": "^2.2.10",
     "father": "^4.3.5",
     "father-build": "^1.18.6",
     "gh-pages": "^6.1.0",
@@ -79,5 +72,12 @@
     "react-dom": "^16.0.0",
     "regenerator-runtime": "^0.14.0",
     "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "engines": {
+    "node": ">=8.x"
   }
 }
diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx
index ae6baf79d..fbf9c12a7 100644
--- a/src/Handles/Handle.tsx
+++ b/src/Handles/Handle.tsx
@@ -26,7 +26,7 @@ export interface HandleProps {
   onChangeComplete?: () => void;
 }
 
-const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivElement>) => {
+const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
   const {
     prefixCls,
     value,
@@ -53,6 +53,7 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
     styles,
     classNames,
   } = React.useContext(SliderContext);
+
   const handlePrefixCls = `${prefixCls}-handle`;
 
   // ============================ Events ============================
@@ -124,7 +125,7 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
         onChangeComplete?.();
         break;
     }
-  }
+  };
 
   // ============================ Offset ============================
   const positionStyle = getDirectionStyle(direction, value, min, max);
diff --git a/src/Handles/index.tsx b/src/Handles/index.tsx
index 1c7ac4605..d3ee91d9b 100644
--- a/src/Handles/index.tsx
+++ b/src/Handles/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import Handle from './Handle';
-import type { HandleProps } from './Handle';
-import { getIndex } from '../util';
 import type { OnStartMove } from '../interface';
+import { getIndex } from '../util';
+import type { HandleProps } from './Handle';
+import Handle from './Handle';
 
 export interface HandlesProps {
   prefixCls: string;
@@ -21,7 +21,7 @@ export interface HandlesRef {
   focus: (index: number) => void;
 }
 
-const Handles = React.forwardRef((props: HandlesProps, ref: React.Ref<HandlesRef>) => {
+const Handles = React.forwardRef<HandlesRef, HandlesProps>((props, ref) => {
   const {
     prefixCls,
     style,
@@ -42,7 +42,7 @@ const Handles = React.forwardRef((props: HandlesProps, ref: React.Ref<HandlesRef
 
   return (
     <>
-      {values.map((value, index) => (
+      {values.map<React.ReactNode>((value, index) => (
         <Handle
           ref={(node) => {
             if (!node) {
diff --git a/src/Marks/Mark.tsx b/src/Marks/Mark.tsx
index bcbb362d6..641a61631 100644
--- a/src/Marks/Mark.tsx
+++ b/src/Marks/Mark.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { getDirectionStyle } from '../util';
+import * as React from 'react';
 import SliderContext from '../context';
+import { getDirectionStyle } from '../util';
 
 export interface MarkProps {
   prefixCls: string;
@@ -11,7 +11,7 @@ export interface MarkProps {
   onClick: (value: number) => void;
 }
 
-export default function Mark(props: MarkProps) {
+const Mark: React.FC<MarkProps> = (props) => {
   const { prefixCls, style, children, value, onClick } = props;
   const { min, max, direction, includedStart, includedEnd, included } =
     React.useContext(SliderContext);
@@ -26,10 +26,7 @@ export default function Mark(props: MarkProps) {
       className={classNames(textCls, {
         [`${textCls}-active`]: included && includedStart <= value && value <= includedEnd,
       })}
-      style={{
-        ...positionStyle,
-        ...style,
-      }}
+      style={{ ...positionStyle, ...style }}
       onMouseDown={(e) => {
         e.stopPropagation();
       }}
@@ -40,4 +37,6 @@ export default function Mark(props: MarkProps) {
       {children}
     </span>
   );
-}
+};
+
+export default Mark;
diff --git a/src/Marks/index.tsx b/src/Marks/index.tsx
index 1fd1bab94..441e1bc95 100644
--- a/src/Marks/index.tsx
+++ b/src/Marks/index.tsx
@@ -16,7 +16,7 @@ export interface MarksProps {
   onClick: (value: number) => void;
 }
 
-export default function Marks(props: MarksProps) {
+const Marks: React.FC<MarksProps> = (props) => {
   const { prefixCls, marks, onClick } = props;
 
   const markPrefixCls = `${prefixCls}-mark`;
@@ -28,17 +28,13 @@ export default function Marks(props: MarksProps) {
 
   return (
     <div className={markPrefixCls}>
-      {marks.map(({ value, style, label }) => (
-        <Mark
-          key={value}
-          prefixCls={markPrefixCls}
-          style={style}
-          value={value}
-          onClick={onClick}
-        >
+      {marks.map<React.ReactNode>(({ value, style, label }) => (
+        <Mark key={value} prefixCls={markPrefixCls} style={style} value={value} onClick={onClick}>
           {label}
         </Mark>
       ))}
     </div>
   );
-}
+};
+
+export default Marks;
diff --git a/src/Slider.tsx b/src/Slider.tsx
index 53680d7ad..44b169f82 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -3,10 +3,14 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import isEqual from 'rc-util/lib/isEqual';
 import warning from 'rc-util/lib/warning';
 import * as React from 'react';
-import type { SliderContextProps } from './context';
-import SliderContext from './context';
 import type { HandlesProps, HandlesRef } from './Handles';
 import Handles from './Handles';
+import type { InternalMarkObj, MarkObj } from './Marks';
+import Marks from './Marks';
+import Steps from './Steps';
+import Tracks from './Tracks';
+import type { SliderContextProps } from './context';
+import SliderContext from './context';
 import useDrag from './hooks/useDrag';
 import useOffset from './hooks/useOffset';
 import type {
@@ -16,10 +20,6 @@ import type {
   SliderClassNames,
   SliderStyles,
 } from './interface';
-import type { InternalMarkObj, MarkObj } from './Marks';
-import Marks from './Marks';
-import Steps from './Steps';
-import Tracks from './Tracks';
 
 /**
  * New:
@@ -106,7 +106,7 @@ export interface SliderRef {
   blur: () => void;
 }
 
-const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>) => {
+const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((props, ref) => {
   const {
     prefixCls = 'rc-slider',
     className,
@@ -166,10 +166,10 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     ariaValueTextFormatterForHandle,
   } = props;
 
-  const handlesRef = React.useRef<HandlesRef>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const handlesRef = React.useRef<HandlesRef>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
-  const direction: Direction = React.useMemo(() => {
+  const direction = React.useMemo<Direction>(() => {
     if (vertical) {
       return reverse ? 'ttb' : 'btt';
     }
@@ -193,10 +193,8 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
 
   // ============================ Marks =============================
   const markList = React.useMemo<InternalMarkObj[]>(() => {
-    const keys = Object.keys(marks || {});
-
-    return keys
-      .map((key) => {
+    return Object.keys(marks || {})
+      .map<InternalMarkObj>((key) => {
         const mark = marks[key];
         const markObj: InternalMarkObj = {
           value: Number(key),
@@ -211,7 +209,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
           markObj.style = mark.style;
           markObj.label = mark.label;
         } else {
-          markObj.label = mark;
+          markObj.label = mark as React.ReactNode;
         }
 
         return markObj;
@@ -292,7 +290,10 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
 
   const finishChange = () => {
     onAfterChange?.(getTriggerValue(rawValuesRef.current));
-    warning(!onAfterChange, '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.');
+    warning(
+      !onAfterChange,
+      '[rc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.',
+    );
     onChangeComplete?.(getTriggerValue(rawValuesRef.current));
   };
 
@@ -443,7 +444,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     },
     blur: () => {
       const { activeElement } = document;
-      if (containerRef.current.contains(activeElement)) {
+      if (containerRef.current?.contains(activeElement)) {
         (activeElement as HTMLElement)?.blur();
       }
     },
@@ -512,10 +513,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
       >
         <div
           className={cls(`${prefixCls}-rail`, classNames?.rail)}
-          style={{
-            ...railStyle,
-            ...styles?.rail,
-          }}
+          style={{ ...railStyle, ...styles?.rail }}
         />
 
         <Tracks
@@ -523,7 +521,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
           style={trackStyle}
           values={sortedCacheValues}
           startPoint={startPoint}
-          onStartMove={mergedDraggableTrack ? onStartMove : null}
+          onStartMove={mergedDraggableTrack ? onStartMove : undefined}
         />
 
         <Steps
diff --git a/src/Steps/Dot.tsx b/src/Steps/Dot.tsx
index a8eaa4bef..4b6d83f07 100644
--- a/src/Steps/Dot.tsx
+++ b/src/Steps/Dot.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { getDirectionStyle } from '../util';
+import * as React from 'react';
 import SliderContext from '../context';
+import { getDirectionStyle } from '../util';
 
 export interface DotProps {
   prefixCls: string;
@@ -10,7 +10,7 @@ export interface DotProps {
   activeStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
 }
 
-export default function Dot(props: DotProps) {
+const Dot: React.FC<DotProps> = (props) => {
   const { prefixCls, value, style, activeStyle } = props;
   const { min, max, direction, included, includedStart, includedEnd } =
     React.useContext(SliderContext);
@@ -19,7 +19,7 @@ export default function Dot(props: DotProps) {
   const active = included && includedStart <= value && value <= includedEnd;
 
   // ============================ Offset ============================
-  let mergedStyle = {
+  let mergedStyle: React.CSSProperties = {
     ...getDirectionStyle(direction, value, min, max),
     ...(typeof style === 'function' ? style(value) : style),
   };
@@ -33,10 +33,10 @@ export default function Dot(props: DotProps) {
 
   return (
     <span
-      className={classNames(dotClassName, {
-        [`${dotClassName}-active`]: active,
-      })}
+      className={classNames(dotClassName, { [`${dotClassName}-active`]: active })}
       style={mergedStyle}
     />
   );
-}
+};
+
+export default Dot;
diff --git a/src/Steps/index.tsx b/src/Steps/index.tsx
index e3c235f85..a81cfc01d 100644
--- a/src/Steps/index.tsx
+++ b/src/Steps/index.tsx
@@ -11,11 +11,11 @@ export interface StepsProps {
   activeStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
 }
 
-export default function Steps(props: StepsProps) {
+const Steps: React.FC<StepsProps> = (props) => {
   const { prefixCls, marks, dots, style, activeStyle } = props;
   const { min, max, step } = React.useContext(SliderContext);
 
-  const stepDots = React.useMemo(() => {
+  const stepDots = React.useMemo<number[]>(() => {
     const dotSet = new Set<number>();
 
     // Add marks
@@ -37,7 +37,7 @@ export default function Steps(props: StepsProps) {
 
   return (
     <div className={`${prefixCls}-step`}>
-      {stepDots.map((dotValue) => (
+      {stepDots.map<React.ReactNode>((dotValue) => (
         <Dot
           prefixCls={prefixCls}
           key={dotValue}
@@ -48,4 +48,6 @@ export default function Steps(props: StepsProps) {
       ))}
     </div>
   );
-}
+};
+
+export default Steps;
diff --git a/src/Tracks/Track.tsx b/src/Tracks/Track.tsx
index b33cee237..45a96b55a 100644
--- a/src/Tracks/Track.tsx
+++ b/src/Tracks/Track.tsx
@@ -15,7 +15,7 @@ export interface TrackProps {
   onStartMove?: OnStartMove;
 }
 
-export default function Track(props: TrackProps) {
+const Track: React.FC<TrackProps> = (props) => {
   const { prefixCls, style, start, end, index, onStartMove, replaceCls } = props;
   const { direction, min, max, disabled, range, classNames } = React.useContext(SliderContext);
 
@@ -69,12 +69,11 @@ export default function Track(props: TrackProps) {
   return (
     <div
       className={className}
-      style={{
-        ...positionStyle,
-        ...style,
-      }}
+      style={{ ...positionStyle, ...style }}
       onMouseDown={onInternalStartMove}
       onTouchStart={onInternalStartMove}
     />
   );
-}
+};
+
+export default Track;
diff --git a/src/Tracks/index.tsx b/src/Tracks/index.tsx
index b1b62be83..07edb1ffd 100644
--- a/src/Tracks/index.tsx
+++ b/src/Tracks/index.tsx
@@ -13,7 +13,7 @@ export interface TrackProps {
   startPoint?: number;
 }
 
-export default function Tracks(props: TrackProps) {
+const Tracks: React.FC<TrackProps> = (props) => {
   const { prefixCls, style, values, startPoint, onStartMove } = props;
   const { included, range, min, styles, classNames } = React.useContext(SliderContext);
 
@@ -28,32 +28,26 @@ export default function Tracks(props: TrackProps) {
       const startValue = startPoint ?? min;
       const endValue = values[0];
 
-      return [
-        {
-          start: Math.min(startValue, endValue),
-          end: Math.max(startValue, endValue),
-        },
-      ];
+      return [{ start: Math.min(startValue, endValue), end: Math.max(startValue, endValue) }];
     }
 
     // Multiple
     const list: { start: number; end: number }[] = [];
 
     for (let i = 0; i < values.length - 1; i += 1) {
-      list.push({
-        start: values[i],
-        end: values[i + 1],
-      });
+      list.push({ start: values[i], end: values[i + 1] });
     }
 
     return list;
   }, [values, range, startPoint, min]);
 
-  // ========================== Render ==========================
-  let tracksNode: React.ReactElement = null;
+  if (!included) {
+    return null;
+  }
 
-  if (classNames.tracks || styles.tracks) {
-    tracksNode = (
+  // ========================== Render ==========================
+  const tracksNode =
+    classNames.tracks || styles.tracks ? (
       <Track
         index={null}
         prefixCls={prefixCls}
@@ -62,20 +56,16 @@ export default function Tracks(props: TrackProps) {
         replaceCls={cls(classNames.tracks, `${prefixCls}-tracks`)}
         style={styles.tracks}
       />
-    );
-  }
+    ) : null;
 
-  return (included ? (
+  return (
     <>
       {tracksNode}
-      {trackList.map(({ start, end }, index) => (
+      {trackList.map<React.ReactNode>(({ start, end }, index) => (
         <Track
           index={index}
           prefixCls={prefixCls}
-          style={{
-            ...getIndex(style, index),
-            ...styles.track,
-          }}
+          style={{ ...getIndex(style, index), ...styles.track }}
           start={start}
           end={end}
           key={index}
@@ -83,5 +73,7 @@ export default function Tracks(props: TrackProps) {
         />
       ))}
     </>
-  ) : null) as unknown as React.ReactElement;
-}
+  );
+};
+
+export default Tracks;
diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
index 8e7f2cdc5..3fbbe307e 100644
--- a/src/hooks/useDrag.ts
+++ b/src/hooks/useDrag.ts
@@ -8,7 +8,7 @@ function getPosition(e: React.MouseEvent | React.TouchEvent | MouseEvent | Touch
   return { pageX: obj.pageX, pageY: obj.pageY };
 }
 
-export default function useDrag(
+function useDrag(
   containerRef: React.RefObject<HTMLDivElement>,
   direction: Direction,
   rawValues: number[],
@@ -73,7 +73,7 @@ export default function useDrag(
       // Use first value to revert back of valid offset (like steps marks)
       const formatStartValue = formatValue(startValue + offset);
       offset = formatStartValue - startValue;
-      const cloneCacheValues = originValues.map((val) => val + offset);
+      const cloneCacheValues = originValues.map<number>((val) => val + offset);
       flushValues(cloneCacheValues);
     } else {
       // >>>> Dragging on the handle
@@ -171,3 +171,5 @@ export default function useDrag(
 
   return [draggingIndex, draggingValue, returnValues, onStartMove];
 }
+
+export default useDrag;
diff --git a/src/hooks/useOffset.ts b/src/hooks/useOffset.ts
index c80d0122a..3d47994da 100644
--- a/src/hooks/useOffset.ts
+++ b/src/hooks/useOffset.ts
@@ -65,12 +65,12 @@ export default function useOffset(
     [step, min, max, formatRangeValue],
   );
 
-  const formatValue: FormatValue = React.useCallback(
+  const formatValue = React.useCallback<FormatValue>(
     (val) => {
       const formatNextValue = formatRangeValue(val);
 
       // List align values
-      const alignValues = markList.map((mark) => mark.value);
+      const alignValues = markList.map<number>((mark) => mark.value);
       if (step !== null) {
         alignValues.push(formatStepValue(val));
       }
@@ -197,7 +197,7 @@ export default function useOffset(
 
   // Values
   const offsetValues: OffsetValues = (values, offset, valueIndex, mode = 'unit') => {
-    const nextValues = values.map(formatValue);
+    const nextValues = values.map<number>(formatValue);
     const originValue = nextValues[valueIndex];
     const nextValue = offsetValue(nextValues, offset, valueIndex, mode);
     nextValues[valueIndex] = nextValue;
diff --git a/src/index.tsx b/src/index.tsx
index b135bac1d..f3077a53c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
-import Slider from './Slider';
 import type { SliderProps, SliderRef } from './Slider';
+import Slider from './Slider';
 
 export type { SliderProps, SliderRef };
 
diff --git a/src/interface.ts b/src/interface.ts
index 82f0b59ea..ffaab9dae 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -2,7 +2,11 @@ import type React from 'react';
 
 export type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt';
 
-export type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number, startValues?: number[]) => void;
+export type OnStartMove = (
+  e: React.MouseEvent | React.TouchEvent,
+  valueIndex: number,
+  startValues?: number[],
+) => void;
 
 export type AriaValueFormat = (value: number) => string;
 
diff --git a/tests/Slider.test.js b/tests/Slider.test.js
index accb956f5..b80f3fd8c 100644
--- a/tests/Slider.test.js
+++ b/tests/Slider.test.js
@@ -1,9 +1,9 @@
-import React from 'react';
-import classNames from 'classnames';
-import { render, fireEvent, createEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { createEvent, fireEvent, render } from '@testing-library/react';
+import classNames from 'classnames';
 import keyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
 import Slider from '../src/Slider';
 
 describe('Slider', () => {
@@ -189,7 +189,9 @@ describe('Slider', () => {
   it('decreases the value when key "left" is pressed', () => {
     const onChange = jest.fn();
     const onChangeComplete = jest.fn();
-    const { container } = render(<Slider defaultValue={50} onChange={onChange} onChangeComplete={onChangeComplete} />);
+    const { container } = render(
+      <Slider defaultValue={50} onChange={onChange} onChangeComplete={onChangeComplete} />,
+    );
 
     fireEvent.keyDown(container.getElementsByClassName('rc-slider-handle')[0], {
       keyCode: keyCode.LEFT,
@@ -647,4 +649,9 @@ describe('Slider', () => {
     fireEvent(document, mouseMove);
     expect(onChange).toHaveBeenLastCalledWith(100);
   });
+
+  it('should render Slider with included=false', () => {
+    const { asFragment } = render(<Slider included={false} />);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
 });
diff --git a/tests/__snapshots__/Slider.test.js.snap b/tests/__snapshots__/Slider.test.js.snap
index e7163d46d..40af08187 100644
--- a/tests/__snapshots__/Slider.test.js.snap
+++ b/tests/__snapshots__/Slider.test.js.snap
@@ -28,6 +28,30 @@ exports[`Slider should render Slider with correct DOM structure 1`] = `
 </div>
 `;
 
+exports[`Slider should render Slider with included=false 1`] = `
+<div
+  class="rc-slider rc-slider-horizontal"
+>
+  <div
+    class="rc-slider-rail"
+  />
+  <div
+    class="rc-slider-step"
+  />
+  <div
+    aria-disabled="false"
+    aria-orientation="horizontal"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="rc-slider-handle"
+    role="slider"
+    style="left: 0%; transform: translateX(-50%);"
+    tabindex="0"
+  />
+</div>
+`;
+
 exports[`Slider should render Slider without handle if value is null 1`] = `
 <div
   class="rc-slider rc-slider-horizontal"
diff --git a/tests/common.test.js b/tests/common.test.js
index e38398399..23d417af4 100644
--- a/tests/common.test.js
+++ b/tests/common.test.js
@@ -1,10 +1,10 @@
 /* eslint-disable max-len, no-undef */
-import React from 'react';
-import { render, fireEvent, createEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { createEvent, fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
-import Slider, { Range, createSliderWithTooltip } from '../src';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
+import Slider from '../src';
 
 // const setWidth = (object, width) => {
 //   // https://github.com/tmpvar/jsdom/commit/0cdb2efcc69b6672dc2928644fc0172df5521176
@@ -366,7 +366,7 @@ describe('Common', () => {
       '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', () => {
diff --git a/tests/marks.test.js b/tests/marks.test.js
index 0d8c53c57..deefbdb32 100644
--- a/tests/marks.test.js
+++ b/tests/marks.test.js
@@ -1,8 +1,8 @@
 /* eslint-disable max-len, no-undef */
-import React from 'react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import React from 'react';
 import Slider from '../src';
 
 describe('marks', () => {