diff --git a/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7722e0db27..22f9a5b8c7 100644
--- a/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1669,7 +1669,7 @@ exports[`renders components/slider/demo/style-class.tsx extend context correctly
     </div>
   </div>
   <div
-    class="ant-slider acss-1pw5qi4 css-var-test-id ant-slider-vertical"
+    class="ant-slider acss-14altik css-var-test-id ant-slider-vertical"
     style="height: 300px;"
   >
     <div
@@ -1689,7 +1689,7 @@ exports[`renders components/slider/demo/style-class.tsx extend context correctly
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
-      class="ant-slider-handle acss-1mqvsgv"
+      class="ant-slider-handle acss-10vy2hp"
       role="slider"
       style="top: 30%; transform: translateY(-50%); border-color: rgb(114, 46, 209); box-shadow: 0 2px 8px #722ed1;"
       tabindex="0"
diff --git a/components/slider/__tests__/__snapshots__/demo.test.ts.snap b/components/slider/__tests__/__snapshots__/demo.test.ts.snap
index 626d62fa42..12170e1a46 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.ts.snap
@@ -1338,7 +1338,7 @@ exports[`renders components/slider/demo/style-class.tsx correctly 1`] = `
     />
   </div>
   <div
-    class="ant-slider acss-1pw5qi4 css-var-test-id ant-slider-vertical"
+    class="ant-slider acss-14altik css-var-test-id ant-slider-vertical"
     style="height:300px"
   >
     <div
@@ -1358,7 +1358,7 @@ exports[`renders components/slider/demo/style-class.tsx correctly 1`] = `
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
-      class="ant-slider-handle acss-1mqvsgv"
+      class="ant-slider-handle acss-10vy2hp"
       role="slider"
       style="top:30%;transform:translateY(-50%);border-color:#722ed1;box-shadow:0 2px 8px #722ed1"
       tabindex="0"
diff --git a/components/slider/demo/style-class.tsx b/components/slider/demo/style-class.tsx
index 32b85a5c23..83526c92a2 100644
--- a/components/slider/demo/style-class.tsx
+++ b/components/slider/demo/style-class.tsx
@@ -3,12 +3,24 @@ import { Flex, Slider } from 'antd';
 import type { SliderSingleProps } from 'antd';
 import { createStyles } from 'antd-style';
 
-const useStyles = createStyles(({ css, cssVar }) => ({
+const useStyles = createStyles(({ css }) => ({
   root: css`
     width: 300px;
   `,
+}));
+
+const useStylesFn = createStyles(({ css, cssVar }) => ({
+  root: css`
+    width: 100px;
+    &:hover .ant-slider-handle:after {
+      box-shadow: 0 0 0 ${cssVar.lineWidthBold} #722ed1;
+    }
+  `,
   handle: css`
-    &::after {
+    &.ant-slider-handle:hover::after,
+    &.ant-slider-handle:active::after,
+    &.ant-slider-handle:focus::after,
+    &.ant-slider-handle::after {
       box-shadow: 0 0 0 ${cssVar.lineWidthBold} #722ed1;
     }
   `,
@@ -31,17 +43,17 @@ const stylesFn: SliderSingleProps['styles'] = (info) => {
 };
 
 const App: React.FC = () => {
-  const { styles } = useStyles();
+  const { styles: classNames } = useStyles();
+  const { styles: classNameFn } = useStylesFn();
   const sharedProps: SliderSingleProps = {
-    classNames: { root: styles.root },
     defaultValue: 30,
   };
   return (
     <Flex vertical gap="middle">
-      <Slider {...sharedProps} styles={stylesObject} />
+      <Slider {...sharedProps} classNames={classNames} styles={stylesObject} />
       <Slider
         {...sharedProps}
-        classNames={{ root: styles.root, handle: styles.handle }}
+        classNames={classNameFn}
         orientation="vertical"
         reverse
         styles={stylesFn}