diff --git a/packages/varlet-ui/src/slider/Slider.vue b/packages/varlet-ui/src/slider/Slider.vue
index eeed5fb053f..612ad16bed5 100644
--- a/packages/varlet-ui/src/slider/Slider.vue
+++ b/packages/varlet-ui/src/slider/Slider.vue
@@ -4,8 +4,8 @@
       class="var-slider-block"
       :class="[isDisabled ? 'var-slider__disable' : null, errorMessage ? 'var-slider__error' : null]"
       :style="{
-        height: `${3 * thumbSize}px`,
-        margin: `0 ${thumbSize / 2}px`,
+        height: thumbSize === undefined ? thumbSize : `${3 * toNumber(thumbSize)}px`,
+        margin: thumbSize === undefined ? thumbSize : `0 ${toNumber(thumbSize) / 2}px`,
       }"
       ref="sliderEl"
       @click="click"
@@ -26,7 +26,7 @@
         :key="item.enumValue"
         :style="{
           left: `${item.value}%`,
-          zIndex: thumbsProps[item.enumValue].active ? 1 : null,
+          zIndex: thumbsProps[item.enumValue].active ? 1 : undefined,
         }"
         @touchstart="start($event, item.enumValue)"
         @touchmove="move($event, item.enumValue)"
@@ -47,8 +47,18 @@
             :class="[thumbsProps[item.enumValue].active ? 'var-slider__thumb-ripple-active' : null]"
             :style="{
               background: thumbColor,
-              height: thumbSize ? (thumbsProps[item.enumValue].active ? 3 * thumbSize + 'px' : '0px') : null,
-              width: thumbSize ? (thumbsProps[item.enumValue].active ? 3 * thumbSize + 'px' : '0px') : null,
+              height:
+                thumbSize === undefined
+                  ? undefined
+                  : thumbsProps[item.enumValue].active
+                  ? `${3 * toNumber(thumbSize)}px`
+                  : '0px',
+              width:
+                thumbSize === undefined
+                  ? undefined
+                  : thumbsProps[item.enumValue].active
+                  ? `${3 * toNumber(thumbSize)}px`
+                  : '0px',
             }"
           ></div>
           <div
@@ -57,8 +67,8 @@
             :style="{
               background: labelColor,
               color: labelTextColor,
-              height: 2 * thumbSize + 'px',
-              width: 2 * thumbSize + 'px',
+              height: thumbSize === undefined ? thumbSize : `${2 * toNumber(thumbSize)}px`,
+              width: thumbSize === undefined ? thumbSize : `${2 * toNumber(thumbSize)}px`,
             }"
           >
             <span>{{ item.value }}</span>
@@ -330,6 +340,7 @@ export default defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      toNumber,
       showLabel,
       start,
       move,