fix: slider track draggale range height/width error (#44503)

* fix: slider track draggale range height/width error

* chore: style

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -25444,6 +25444,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25490,6 +25491,7 @@ exports[`ConfigProvider components Slider configProvider componentDisabled 1`] =
   />
   <div
     aria-disabled="true"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25535,6 +25537,7 @@ exports[`ConfigProvider components Slider configProvider componentSize large 1`]
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25581,6 +25584,7 @@ exports[`ConfigProvider components Slider configProvider componentSize middle 1`
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25627,6 +25631,7 @@ exports[`ConfigProvider components Slider configProvider componentSize small 1`]
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25673,6 +25678,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -25719,6 +25725,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"

components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -431,6 +431,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="20"
       aria-valuemin="0"
       aria-valuenow="0"

components/float-button/__tests__/__snapshots__/demo.test.ts.snap

@@ -406,6 +406,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="20"
       aria-valuemin="0"
       aria-valuenow="0"

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -5415,6 +5415,7 @@ Array [
                 />
                 <div
                   aria-disabled="true"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="0"
                   aria-valuenow="0"
@@ -19989,6 +19990,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
               </div>
               <div
                 aria-disabled="false"
+                aria-orientation="horizontal"
                 aria-valuemax="100"
                 aria-valuemin="0"
                 aria-valuenow="0"

components/form/__tests__/__snapshots__/demo.test.tsx.snap

@@ -2894,6 +2894,7 @@ Array [
                 />
                 <div
                   aria-disabled="true"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="0"
                   aria-valuenow="0"
@@ -8880,6 +8881,7 @@ exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
               </div>
               <div
                 aria-disabled="false"
+                aria-orientation="horizontal"
                 aria-valuemax="100"
                 aria-valuemin="0"
                 aria-valuenow="0"

components/form/__tests__/__snapshots__/index.test.tsx.snap

@@ -1033,6 +1033,7 @@ exports[`Form form should support disabled 1`] = `
               />
               <div
                 aria-disabled="true"
+                aria-orientation="horizontal"
                 aria-valuemax="100"
                 aria-valuemin="0"
                 aria-valuenow="0"

components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -925,6 +925,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="1"
@@ -1040,6 +1041,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="1"
@@ -1155,6 +1157,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="2"

components/grid/__tests__/__snapshots__/demo.test.ts.snap

@@ -911,6 +911,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="1"
@@ -1007,6 +1008,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="1"
@@ -1103,6 +1105,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="horizontal"
         aria-valuemax="5"
         aria-valuemin="0"
         aria-valuenow="2"

components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -17,6 +17,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -60,6 +61,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -89,6 +91,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -160,6 +163,7 @@ Array [
     />
     <div
       aria-disabled="true"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -194,7 +198,7 @@ Array [
       class="ant-slider-rail"
     />
     <div
-      class="ant-slider-track ant-slider-track-1"
+      class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
       style="left: 20%; width: 30%;"
     />
     <div
@@ -202,6 +206,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -231,6 +236,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -277,6 +283,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="30"
@@ -324,6 +331,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
@@ -353,6 +361,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="50"
@@ -417,6 +426,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="26"
@@ -446,6 +456,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="37"
@@ -518,7 +529,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
     class="ant-slider-rail"
   />
   <div
-    class="ant-slider-track ant-slider-track-1"
+    class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
     style="left: 20%; width: 30%;"
   />
   <div
@@ -526,6 +537,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="20"
@@ -555,6 +567,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx extend context correc
   </div>
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="50"
@@ -604,6 +617,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -647,6 +661,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -676,6 +691,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -747,6 +763,7 @@ exports[`renders components/slider/demo/icon-slider.tsx extend context correctly
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="20"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -829,6 +846,7 @@ exports[`renders components/slider/demo/input-number.tsx extend context correctl
           />
           <div
             aria-disabled="false"
+            aria-orientation="horizontal"
             aria-valuemax="20"
             aria-valuemin="1"
             aria-valuenow="1"
@@ -965,6 +983,7 @@ exports[`renders components/slider/demo/input-number.tsx extend context correctl
           />
           <div
             aria-disabled="false"
+            aria-orientation="horizontal"
             aria-valuemax="1"
             aria-valuemin="0"
             aria-valuenow="0"
@@ -1119,6 +1138,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1209,6 +1229,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="26"
@@ -1238,6 +1259,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1327,6 +1349,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1420,6 +1443,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1513,6 +1537,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1593,6 +1618,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -1636,6 +1662,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -1665,6 +1692,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -1735,6 +1763,7 @@ exports[`renders components/slider/demo/show-tooltip.tsx extend context correctl
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="30"
@@ -1784,6 +1813,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -1827,6 +1857,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -1878,6 +1909,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="30"
@@ -1925,6 +1957,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
@@ -1954,6 +1987,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="50"
@@ -2018,6 +2052,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="26"
@@ -2047,6 +2082,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="37"

components/slider/__tests__/__snapshots__/demo.test.ts.snap

@@ -17,6 +17,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -41,6 +42,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -51,6 +53,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -101,6 +104,7 @@ Array [
     />
     <div
       aria-disabled="true"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -116,7 +120,7 @@ Array [
       class="ant-slider-rail"
     />
     <div
-      class="ant-slider-track ant-slider-track-1"
+      class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
       style="left:20%;width:30%"
     />
     <div
@@ -124,6 +128,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -134,6 +139,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -161,6 +167,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="30"
@@ -189,6 +196,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
@@ -199,6 +207,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="50"
@@ -244,6 +253,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="26"
@@ -254,6 +264,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="37"
@@ -305,7 +316,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
     class="ant-slider-rail"
   />
   <div
-    class="ant-slider-track ant-slider-track-1"
+    class="ant-slider-track ant-slider-track-1 ant-slider-track-draggable"
     style="left:20%;width:30%"
   />
   <div
@@ -313,6 +324,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="20"
@@ -323,6 +335,7 @@ exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="50"
@@ -351,6 +364,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -375,6 +389,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -385,6 +400,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -435,6 +451,7 @@ exports[`renders components/slider/demo/icon-slider.tsx correctly 1`] = `
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="20"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -496,6 +513,7 @@ exports[`renders components/slider/demo/input-number.tsx correctly 1`] = `
           />
           <div
             aria-disabled="false"
+            aria-orientation="horizontal"
             aria-valuemax="20"
             aria-valuemin="1"
             aria-valuenow="1"
@@ -613,6 +631,7 @@ exports[`renders components/slider/demo/input-number.tsx correctly 1`] = `
           />
           <div
             aria-disabled="false"
+            aria-orientation="horizontal"
             aria-valuemax="1"
             aria-valuemin="0"
             aria-valuenow="0"
@@ -746,6 +765,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -817,6 +837,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="26"
@@ -827,6 +848,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -897,6 +919,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -971,6 +994,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1045,6 +1069,7 @@ Array [
     </div>
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="37"
@@ -1104,6 +1129,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"
@@ -1128,6 +1154,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="20"
@@ -1138,6 +1165,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="50"
@@ -1188,6 +1216,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -1212,6 +1241,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="0"
@@ -1244,6 +1274,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="30"
@@ -1272,6 +1303,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="20"
@@ -1282,6 +1314,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="50"
@@ -1327,6 +1360,7 @@ Array [
       </div>
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="26"
@@ -1337,6 +1371,7 @@ Array [
       />
       <div
         aria-disabled="false"
+        aria-orientation="vertical"
         aria-valuemax="100"
         aria-valuemin="0"
         aria-valuenow="37"

components/slider/__tests__/__snapshots__/index.test.tsx.snap

@@ -16,6 +16,7 @@ exports[`Slider rtl render component should be rendered correctly in RTL directi
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -44,6 +45,7 @@ exports[`Slider should render in RTL direction 1`] = `
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="30"

components/slider/style/index.tsx

@@ -105,6 +105,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
         transition: `background-color ${token.motionDurationMid}`,
       },
 
+      [`${componentCls}-track-draggable`]: {
+        // base on https://github.com/ant-design/ant-design/pull/42825/files#diff-9b9560a611e7ed0e6ef24ca9f1faff1e8c816d3f35ed6a1f73c36d2b42790aba
+        // zIndex: 1,
+        boxSizing: 'content-box',
+        backgroundClip: 'content-box',
+        border: 'solid rgba(0,0,0,0)',
+      },
+
       '&:hover': {
         [`${componentCls}-rail`]: {
           backgroundColor: token.railHoverBg,
@@ -290,6 +298,19 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
   const handlePos: keyof React.CSSProperties = horizontal ? 'insetBlockStart' : 'insetInlineStart';
   const markInset: keyof React.CSSProperties = horizontal ? 'top' : 'insetInlineStart';
 
+  const handlePosSize = (railSize * 3 - handleSize) / 2;
+  const draggableBorderSize = (handleSize - railSize) / 2;
+
+  const draggableBorder: React.CSSProperties = horizontal
+    ? {
+        borderWidth: `${draggableBorderSize}px 0`,
+        transform: `translateY(-${draggableBorderSize}px)`,
+      }
+    : {
+        borderWidth: `0 ${draggableBorderSize}px`,
+        transform: `translateX(-${draggableBorderSize}px)`,
+      };
+
   return {
     [railPadding]: railSize,
     [part]: railSize * 3,
@@ -303,8 +324,12 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject =
       [part]: railSize,
     },
 
+    [`${componentCls}-track-draggable`]: {
+      ...draggableBorder,
+    },
+
     [`${componentCls}-handle`]: {
-      [handlePos]: (railSize * 3 - handleSize) / 2,
+      [handlePos]: handlePosSize,
     },
 
     [`${componentCls}-mark`]: {

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -15224,6 +15224,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="8"

components/space/__tests__/__snapshots__/demo.test.tsx.snap

@@ -3987,6 +3987,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="100"
       aria-valuemin="0"
       aria-valuenow="8"

components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -618,6 +618,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="10"
       aria-valuemin="1"
       aria-valuenow="1"
@@ -2424,6 +2425,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="10"
       aria-valuemin="1"
       aria-valuenow="1"

components/typography/__tests__/__snapshots__/demo.test.tsx.snap

@@ -629,6 +629,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="10"
       aria-valuemin="1"
       aria-valuenow="1"
@@ -1957,6 +1958,7 @@ Array [
     />
     <div
       aria-disabled="false"
+      aria-orientation="horizontal"
       aria-valuemax="10"
       aria-valuemin="1"
       aria-valuenow="1"

components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -543,6 +543,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="1"
                   aria-valuenow="16"
@@ -617,6 +618,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="0"
                   aria-valuenow="11"
@@ -691,6 +693,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="180"
                   aria-valuemin="-180"
                   aria-valuenow="-22"

components/watermark/__tests__/__snapshots__/demo.test.ts.snap

@@ -170,6 +170,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="1"
                   aria-valuenow="16"
@@ -225,6 +226,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="100"
                   aria-valuemin="0"
                   aria-valuenow="11"
@@ -280,6 +282,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
                 />
                 <div
                   aria-disabled="false"
+                  aria-orientation="horizontal"
                   aria-valuemax="180"
                   aria-valuemin="-180"
                   aria-valuenow="-22"

package.json

@@ -144,7 +144,7 @@
     "rc-resize-observer": "^1.2.0",
     "rc-segmented": "~2.2.0",
     "rc-select": "~14.7.1",
-    "rc-slider": "~10.1.0",
+    "rc-slider": "~10.2.1",
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.32.1",