diff --git a/packages/semi-foundation/slider/foundation.ts b/packages/semi-foundation/slider/foundation.ts
index d1f4d56a4c..dafb950adb 100644
--- a/packages/semi-foundation/slider/foundation.ts
+++ b/packages/semi-foundation/slider/foundation.ts
@@ -40,7 +40,7 @@ export interface SliderProps{
     handleDot?: {
         size?: string;
         color?: string
-    } & ({
+    } | ({
         size?: string;
         color?: string
     }[])
diff --git a/packages/semi-ui/slider/index.tsx b/packages/semi-ui/slider/index.tsx
index 5352cc0424..569ceec582 100644
--- a/packages/semi-ui/slider/index.tsx
+++ b/packages/semi-ui/slider/index.tsx
@@ -137,7 +137,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     const offsetParentRect = this.sliderEl.current.offsetParent?.getBoundingClientRect();
 
                     const offset = {
-                        x: offsetParentRect ? (rect.left - offsetParentRect.left): this.sliderEl.current.offsetLeft,
+                        x: offsetParentRect ? (rect.left - offsetParentRect.left) : this.sliderEl.current.offsetLeft,
                         y: offsetParentRect ? (rect.top - offsetParentRect.top) : this.sliderEl.current.offsetTop,
                     };
                     return {
@@ -333,7 +333,13 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
             'aria-disabled': disabled
         };
         vertical && Object.assign(commonAria, { 'aria-orientation': 'vertical' });
-
+        const handleDot = this.props.handleDot as {
+            size?: string;
+            color?: string
+        } & ({
+            size?: string;
+            color?: string
+        }[]);
         const handleContents = !range ? (
             <Tooltip
                 content={tipChildren.min}
@@ -387,9 +393,9 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                     aria-valuemax={max}
                     aria-valuemin={min}
                 >
-                    {this.props.handleDot && <div className={cssClasses.HANDLE_DOT} style={{
-                        ...(this.props.handleDot?.size ? { width: this.props.handleDot.size, height: this.props.handleDot.size } : {}),
-                        ...(this.props.handleDot?.color ? { backgroundColor: this.props.handleDot.color } : {}),
+                    {handleDot && <div className={cssClasses.HANDLE_DOT} style={{
+                        ...(handleDot?.size ? { width: handleDot.size, height: handleDot.size } : {}),
+                        ...(handleDot?.color ? { backgroundColor: handleDot.color } : {}),
                     }} />}
                 </span>
             </Tooltip>
@@ -445,9 +451,9 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
                         aria-valuemax={currentValue[1]}
                         aria-valuemin={min}
                     >
-                        {this.props.handleDot?.[0] && <div className={cssClasses.HANDLE_DOT} style={{
-                            ...(this.props.handleDot[0]?.size ? { width: this.props.handleDot[0].size, height: this.props.handleDot[0].size } : {}),
-                            ...(this.props.handleDot[0]?.color ? { backgroundColor: this.props.handleDot[0].color } : {}),
+                        {handleDot?.[0] && <div className={cssClasses.HANDLE_DOT} style={{
+                            ...(handleDot[0]?.size ? { width: handleDot[0].size, height: handleDot[0].size } : {}),
+                            ...(handleDot[0]?.color ? { backgroundColor: handleDot[0].color } : {}),
                         }} />}
                     </span>
                 </Tooltip>