✨ feat: migrate less to token for Slider (#42428)

* ✨ feat: migrate less to token for Slider * ✨ feat: update snap * ✨ feat: update style * ✨ feat: update style * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: test ci * ✨ feat: update * ✨ feat: update snap * ✨ feat: update * ✨ feat: update * ✨ feat: 删除未使用token * ✨ feat: update doc * ✨ feat: update dome * ✨ feat: update * ✨ feat: test ci * 📝 doc: update doc * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: add demo * ✨ feat: add demo * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * ✨ feat: update for reviewer * Apply suggestions from code review --------- Co-authored-by: MadCcc <1075746765@qq.com>
1 year ago · 4ae0d6bcf5
9 changed files with 727 additions and 15 deletions
--- a/components/slider/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/slider/tests/snapshots/demo-extend.test.ts.snap
@ -141,6 +141,371 @@ Array [
 ]
 `;

+exports[`renders components/slider/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-slider ant-slider-disabled ant-slider-horizontal"
+  >
+    <div
+      class="ant-slider-rail"
+    />
+    <div
+      class="ant-slider-track"
+      style="left: 0%; width: 30%;"
+    />
+    <div
+      class="ant-slider-step"
+    />
+    <div
+      aria-disabled="true"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="30"
+      class="ant-slider-handle"
+      role="slider"
+      style="left: 30%; transform: translateX(-50%);"
+    />
+    <div
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    >
+      <div
+        class="ant-tooltip-arrow"
+        style="position: absolute; bottom: 0px; left: 0px;"
+      />
+      <div
+        class="ant-tooltip-content"
+      >
+        <div
+          class="ant-tooltip-inner"
+          role="tooltip"
+        >
+          30
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-slider ant-slider-horizontal"
+  >
+    <div
+      class="ant-slider-rail"
+    />
+    <div
+      class="ant-slider-track ant-slider-track-1"
+      style="left: 20%; width: 30%;"
+    />
+    <div
+      class="ant-slider-step"
+    />
+    <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="20"
+      class="ant-slider-handle ant-slider-handle-1"
+      role="slider"
+      style="left: 20%; transform: translateX(-50%);"
+      tabindex="0"
+    />
+    <div
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    >
+      <div
+        class="ant-tooltip-arrow"
+        style="position: absolute; bottom: 0px; left: 0px;"
+      />
+      <div
+        class="ant-tooltip-content"
+      >
+        <div
+          class="ant-tooltip-inner"
+          role="tooltip"
+        >
+          20
+        </div>
+      </div>
+    </div>
+    <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="50"
+      class="ant-slider-handle ant-slider-handle-2"
+      role="slider"
+      style="left: 50%; transform: translateX(-50%);"
+      tabindex="0"
+    />
+    <div
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-top"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    >
+      <div
+        class="ant-tooltip-arrow"
+        style="position: absolute; bottom: 0px; left: 0px;"
+      />
+      <div
+        class="ant-tooltip-content"
+      >
+        <div
+          class="ant-tooltip-inner"
+          role="tooltip"
+        >
+          50
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    style="display: inline-block; height: 300px; margin-left: 70px;"
+  >
+    <div
+      class="ant-slider ant-slider-vertical"
+    >
+      <div
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track"
+        style="bottom: 0%; height: 30%;"
+      />
+      <div
+        class="ant-slider-step"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="30"
+        class="ant-slider-handle"
+        role="slider"
+        style="bottom: 30%; transform: translateY(50%);"
+        tabindex="0"
+      />
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            30
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    style="display: inline-block; height: 300px; margin-left: 70px;"
+  >
+    <div
+      class="ant-slider ant-slider-vertical"
+    >
+      <div
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track ant-slider-track-1"
+        style="bottom: 20%; height: 30%;"
+      />
+      <div
+        class="ant-slider-step"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="20"
+        class="ant-slider-handle ant-slider-handle-1"
+        role="slider"
+        style="bottom: 20%; transform: translateY(50%);"
+        tabindex="0"
+      />
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            20
+          </div>
+        </div>
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        class="ant-slider-handle ant-slider-handle-2"
+        role="slider"
+        style="bottom: 50%; transform: translateY(50%);"
+        tabindex="0"
+      />
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            50
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    style="display: inline-block; height: 300px; margin-left: 70px;"
+  >
+    <div
+      class="ant-slider ant-slider-vertical ant-slider-with-marks"
+    >
+      <div
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track ant-slider-track-1"
+        style="bottom: 26%; height: 11%;"
+      />
+      <div
+        class="ant-slider-step"
+      >
+        <span
+          class="ant-slider-dot"
+          style="bottom: 0%; transform: translateY(50%);"
+        />
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="bottom: 26%; transform: translateY(50%);"
+        />
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="bottom: 37%; transform: translateY(50%);"
+        />
+        <span
+          class="ant-slider-dot"
+          style="bottom: 100%; transform: translateY(50%);"
+        />
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="26"
+        class="ant-slider-handle ant-slider-handle-1"
+        role="slider"
+        style="bottom: 26%; transform: translateY(50%);"
+        tabindex="0"
+      />
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            26
+          </div>
+        </div>
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="37"
+        class="ant-slider-handle ant-slider-handle-2"
+        role="slider"
+        style="bottom: 37%; transform: translateY(50%);"
+        tabindex="0"
+      />
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-slider-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            37
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-slider-mark"
+      >
+        <span
+          class="ant-slider-mark-text"
+          style="bottom: 0%; transform: translateY(50%);"
+        >
+          0°C
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="bottom: 26%; transform: translateY(50%);"
+        >
+          26°C
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="bottom: 37%; transform: translateY(50%);"
+        >
+          37°C
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="bottom: 100%; transform: translateY(50%); color: rgb(255, 85, 0);"
+        >
+          <strong>
+            100°C
+          </strong>
+        </span>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/slider/demo/draggableTrack.tsx extend context correctly 1`] = `
 <div
  class="ant-slider ant-slider-horizontal"
--- a/components/slider/tests/snapshots/demo.test.ts.snap
+++ b/components/slider/tests/snapshots/demo.test.ts.snap
@ -84,6 +84,219 @@ Array [
 ]
 `;

+exports[`renders components/slider/demo/component-token.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-slider ant-slider-disabled ant-slider-horizontal"
+  >
+    <div
+      class="ant-slider-rail"
+    />
+    <div
+      class="ant-slider-track"
+      style="left:0%;width:30%"
+    />
+    <div
+      class="ant-slider-step"
+    />
+    <div
+      aria-disabled="true"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="30"
+      class="ant-slider-handle"
+      role="slider"
+      style="left:30%;transform:translateX(-50%)"
+    />
+  </div>,
+  <div
+    class="ant-slider ant-slider-horizontal"
+  >
+    <div
+      class="ant-slider-rail"
+    />
+    <div
+      class="ant-slider-track ant-slider-track-1"
+      style="left:20%;width:30%"
+    />
+    <div
+      class="ant-slider-step"
+    />
+    <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="20"
+      class="ant-slider-handle ant-slider-handle-1"
+      role="slider"
+      style="left:20%;transform:translateX(-50%)"
+      tabindex="0"
+    />
+    <div
+      aria-disabled="false"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="50"
+      class="ant-slider-handle ant-slider-handle-2"
+      role="slider"
+      style="left:50%;transform:translateX(-50%)"
+      tabindex="0"
+    />
+  </div>,
+  <div
+    style="display:inline-block;height:300px;margin-left:70px"
+  >
+    <div
+      class="ant-slider ant-slider-vertical"
+    >
+      <div
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track"
+        style="bottom:0%;height:30%"
+      />
+      <div
+        class="ant-slider-step"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="30"
+        class="ant-slider-handle"
+        role="slider"
+        style="bottom:30%;transform:translateY(50%)"
+        tabindex="0"
+      />
+    </div>
+  </div>,
+  <div
+    style="display:inline-block;height:300px;margin-left:70px"
+  >
+    <div
+      class="ant-slider ant-slider-vertical"
+    >
+      <div
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track ant-slider-track-1"
+        style="bottom:20%;height:30%"
+      />
+      <div
+        class="ant-slider-step"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="20"
+        class="ant-slider-handle ant-slider-handle-1"
+        role="slider"
+        style="bottom:20%;transform:translateY(50%)"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        class="ant-slider-handle ant-slider-handle-2"
+        role="slider"
+        style="bottom:50%;transform:translateY(50%)"
+        tabindex="0"
+      />
+    </div>
+  </div>,
+  <div
+    style="display:inline-block;height:300px;margin-left:70px"
+  >
+    <div
+      class="ant-slider ant-slider-vertical ant-slider-with-marks"
+    >
+      <div
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track ant-slider-track-1"
+        style="bottom:26%;height:11%"
+      />
+      <div
+        class="ant-slider-step"
+      >
+        <span
+          class="ant-slider-dot"
+          style="bottom:0%;transform:translateY(50%)"
+        />
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="bottom:26%;transform:translateY(50%)"
+        />
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="bottom:37%;transform:translateY(50%)"
+        />
+        <span
+          class="ant-slider-dot"
+          style="bottom:100%;transform:translateY(50%)"
+        />
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="26"
+        class="ant-slider-handle ant-slider-handle-1"
+        role="slider"
+        style="bottom:26%;transform:translateY(50%)"
+        tabindex="0"
+      />
+      <div
+        aria-disabled="false"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="37"
+        class="ant-slider-handle ant-slider-handle-2"
+        role="slider"
+        style="bottom:37%;transform:translateY(50%)"
+        tabindex="0"
+      />
+      <div
+        class="ant-slider-mark"
+      >
+        <span
+          class="ant-slider-mark-text"
+          style="bottom:0%;transform:translateY(50%)"
+        >
+          0°C
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="bottom:26%;transform:translateY(50%)"
+        >
+          26°C
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="bottom:37%;transform:translateY(50%)"
+        >
+          37°C
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="bottom:100%;transform:translateY(50%);color:#f50"
+        >
+          <strong>
+            100°C
+          </strong>
+        </span>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/slider/demo/draggableTrack.tsx correctly 1`] = `
 <div
  class="ant-slider ant-slider-horizontal"
--- a/components/slider/demo/component-token.md
+++ b/components/slider/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/slider/demo/component-token.tsx
+++ b/components/slider/demo/component-token.tsx
@ -0,0 +1,59 @@
+import { ConfigProvider, Slider } from 'antd';
+import React from 'react';
+
+const style: React.CSSProperties = {
+  display: 'inline-block',
+  height: 300,
+  marginLeft: 70,
+};
+
+const marks = {
+  0: '0°C',
+  26: '26°C',
+  37: '37°C',
+  100: {
+    style: { color: '#f50' },
+    label: <strong>100°C</strong>,
+  },
+};
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Slider: {
+          controlSize: 20,
+          railSize: 4,
+          handleSize: 22,
+          handleSizeHover: 18,
+          dotSize: 8,
+          handleLineWidth: 6,
+          handleLineWidthHover: 2,
+          railBg: '#9f3434',
+          railHoverBg: '#8d2424',
+          trackBg: '#b0b0ef',
+          trackHoverBg: '#c77195',
+          handleColor: '#e6f6a2',
+          handleActiveColor: '#d22bc4',
+          dotBorderColor: '#303030',
+          dotActiveBorderColor: '#918542',
+          trackBgDisabled: '#1a1b80',
+        },
+      },
+    }}
+  >
+    <Slider defaultValue={30} disabled />
+    <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />
+    <div style={style}>
+      <Slider vertical defaultValue={30} />
+    </div>
+    <div style={style}>
+      <Slider vertical range step={10} defaultValue={[20, 50]} />
+    </div>
+    <div style={style}>
+      <Slider vertical range marks={marks} defaultValue={[26, 37]} />
+    </div>
+  </ConfigProvider>
+);
+
+export default App;
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@ -27,6 +27,7 @@ To input a value in a range.
 <code src="./demo/show-tooltip.tsx">Control visible of ToolTip</code>
 <code src="./demo/reverse.tsx">Reverse</code>
 <code src="./demo/draggableTrack.tsx">Draggable track</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>

 ## API

--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@ -28,6 +28,7 @@ demo:
 <code src="./demo/show-tooltip.tsx">控制 ToolTip 的显示</code>
 <code src="./demo/reverse.tsx">反向</code>
 <code src="./demo/draggableTrack.tsx">范围可拖拽</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>

 ## API

--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@ -19,6 +19,15 @@ export interface ComponentToken {
  handleLineWidth: number;
  handleLineWidthHover: number;
  dotSize: number;
+  railBg: string;
+  railHoverBg: string;
+  trackBg: string;
+  trackHoverBg: string;
+  handleColor: string;
+  handleActiveColor: string;
+  dotBorderColor: string;
+  dotActiveBorderColor: string;
+  trackBgDisabled: string;
 }

 interface SliderToken extends FullToken<'Slider'> {
@ -49,25 +58,25 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {

      [`${componentCls}-rail`]: {
        position: 'absolute',
-        backgroundColor: token.colorFillTertiary,
+        backgroundColor: token.railBg,
        borderRadius: token.borderRadiusXS,
        transition: `background-color ${token.motionDurationMid}`,
      },

      [`${componentCls}-track`]: {
        position: 'absolute',
-        backgroundColor: token.colorPrimaryBorder,
+        backgroundColor: token.trackBg,
        borderRadius: token.borderRadiusXS,
        transition: `background-color ${token.motionDurationMid}`,
      },

      '&:hover': {
        [`${componentCls}-rail`]: {
-          backgroundColor: token.colorFillSecondary,
+          backgroundColor: token.railHoverBg,
        },

        [`${componentCls}-track`]: {
-          backgroundColor: token.colorPrimaryBorderHover,
+          backgroundColor: token.trackHoverBg,
        },

        [`${componentCls}-dot`]: {
@ -79,7 +88,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
        },

        [`${componentCls}-dot-active`]: {
-          borderColor: token.colorPrimary,
+          borderColor: token.dotActiveBorderColor,
        },
      },

@ -112,7 +121,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
          width: token.handleSize,
          height: token.handleSize,
          backgroundColor: token.colorBgElevated,
-          boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorder}`,
+          boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.handleColor}`,
          borderRadius: '50%',
          cursor: 'pointer',
          transition: `
@ -139,7 +148,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
          },

          '&::after': {
-            boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`,
+            boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.handleActiveColor}`,
            width: token.handleSizeHover,
            height: token.handleSizeHover,
            insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
@ -178,14 +187,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
        width: dotSize,
        height: dotSize,
        backgroundColor: token.colorBgElevated,
-        border: `${token.handleLineWidth}px solid ${token.colorBorderSecondary}`,
+        border: `${token.handleLineWidth}px solid ${token.dotBorderColor}`,
        borderRadius: '50%',
        cursor: 'pointer',
        transition: `border-color ${token.motionDurationSlow}`,
        pointerEvents: 'auto',

        '&-active': {
-          borderColor: token.colorPrimaryBorder,
+          borderColor: token.dotActiveBorderColor,
        },
      },

@ -193,18 +202,18 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
        cursor: 'not-allowed',

        [`${componentCls}-rail`]: {
-          backgroundColor: `${token.colorFillSecondary} !important`,
+          backgroundColor: `${token.railBg} !important`,
        },

        [`${componentCls}-track`]: {
-          backgroundColor: `${token.colorTextDisabled} !important`,
+          backgroundColor: `${token.trackBgDisabled} !important`,
        },

        [`
          ${componentCls}-dot
        `]: {
          backgroundColor: token.colorBgElevated,
-          borderColor: token.colorTextDisabled,
+          borderColor: token.trackBgDisabled,
          boxShadow: 'none',
          cursor: 'not-allowed',
        },
@ -339,6 +348,15 @@ export default genComponentStyleHook(
      dotSize: 8,
      handleLineWidth,
      handleLineWidthHover,
+      railBg: token.colorFillTertiary,
+      railHoverBg: token.colorFillSecondary,
+      trackBg: token.colorPrimaryBorder,
+      trackHoverBg: token.colorPrimaryBorderHover,
+      handleColor: token.colorPrimaryBorder,
+      handleActiveColor: token.colorPrimary,
+      dotBorderColor: token.colorBorderSecondary,
+      dotActiveBorderColor: token.colorPrimaryBorder,
+      trackBgDisabled: token.colorBgContainerDisabled,
    };
  },
 );
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -389,9 +389,33 @@ export default App;
 | `@skeleton-to-color` | `gradientToColor` | - |
 | `@skeleton-paragraph-margin-top` | `paragraphMarginTop` | - |
 | `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
-| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |
+| `@skeleton-paragraph-li-margin-top` | - | Deprecated for style change |

-<!-- ### Slider -->
+### Slider
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@slider-margin` | - | Could be customized with `className` or `style` |
+| `@slider-rail-background-color` | `railBg` | - |
+| `@slider-rail-background-color-hover` | `railHoverBg` | - |
+| `@slider-track-background-color` | `trackBg` | - |
+| `@slider-track-background-color-hover` | `trackHoverBg` | - |
+| `@slider-handle-border-width` | `handleLineWidth` | - |
+| `@slider-handle-background-color` | - | Deprecated |
+| `@slider-handle-color` | `handleColor` | - |
+| `@slider-handle-color-hover` | `handleActiveColor` | - |
+| `@slider-handle-color-focus` | `handleActiveColor` | - |
+| `@slider-handle-color-focus-shadow` | - Deprecated |
+| `@slider-handle-color-tooltip-open` | `handleActiveColor` | - |
+| `@slider-handle-size` | `handleSize` | - |
+| `@slider-handle-margin-top` | - | Deprecated |
+| `@slider-handle-margin-left` | - | Deprecated |
+| `@slider-handle-shadow` | - | Deprecated |
+| `@slider-dot-border-color` | `dotBorderColor` | - |
+| `@slider-dot-border-color-active` | `dotActiveBorderColor` | - |
+| `@slider-disabled-color` | `trackBgDisabled` | - |
+| `@slider-disabled-background-color` | - | Deprecated |

 ### Statistic

--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -388,7 +388,31 @@ Mentions 提及
 | `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
 | `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |

-<!-- ### Slider 滑动输入条 -->
+### Slider 滑动输入条
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@slider-margin` | - | 可由 `className` 或 `style` 直接修改 |
+| `@slider-rail-background-color` | `railBg` | - |
+| `@slider-rail-background-color-hover` | `railHoverBg` | - |
+| `@slider-track-background-color` | `trackBg` | - |
+| `@slider-track-background-color-hover` | `trackHoverBg` | - |
+| `@slider-handle-border-width` | `handleLineWidth` | - |
+| `@slider-handle-background-color` | - | 已废弃 |
+| `@slider-handle-color` | `handleColor` | - |
+| `@slider-handle-color-hover` | `handleActiveColor` | - |
+| `@slider-handle-color-focus` | `handleActiveColor` | - |
+| `@slider-handle-color-focus-shadow` | - | 已废弃 |
+| `@slider-handle-color-tooltip-open` | `handleActiveColor` | - |
+| `@slider-handle-size` | `handleSize` | - |
+| `@slider-handle-margin-top` | - | 已废弃 |
+| `@slider-handle-margin-left` | - | 已废弃 |
+| `@slider-handle-shadow` | - | 已废弃 |
+| `@slider-dot-border-color` | `dotBorderColor` | - |
+| `@slider-dot-border-color-active` | `dotActiveBorderColor` | - |
+| `@slider-disabled-color` | `trackBgDisabled` | - |
+| `@slider-disabled-background-color` | - | 已废弃 |

 ### Statistic 统计数值