diff --git a/src/slider/slider.tsx b/src/slider/slider.tsx
index e77a3d6a7..44b84189f 100644
--- a/src/slider/slider.tsx
+++ b/src/slider/slider.tsx
@@ -1,5 +1,6 @@
 import { ref, toRefs, computed, reactive, defineComponent, watch, onMounted } from 'vue';
 import isFunction from 'lodash/isFunction';
+import { useIntersectionObserver } from '@vueuse/core';
 import config from '../config';
 import props from './props';
 import { useVModel } from '../shared/useVModel';
@@ -251,7 +252,14 @@ export default defineComponent({
       }
     };
 
-    onMounted(() => {
+    const { stop } = useIntersectionObserver(rootRef, ([{ isIntersecting }], observerElement) => {
+      if (isIntersecting) {
+        stop();
+        init();
+      }
+    });
+
+    const init = () => {
       getInitialStyle();
 
       if (props.range) {
@@ -265,7 +273,7 @@ export default defineComponent({
       if (props.marks) {
         handleMask(props.marks);
       }
-    });
+    };
 
     const readerMinText = () => {
       if (!props.showExtremeValue) {