Slider Design Token

Slider 控件使用 SliderToken（Token ID: "Slider"）作为组件级 Design Token。所有 Token 值均从全局 SharedToken 派生，遵循 Ant Design 5.0 的三层 Token 派生体系。

📖 Token 源码位置：src/AtomUI.Desktop.Controls/Slider/SliderToken.cs

Token 基础信息

项目	值
Token 类	`SliderToken`（`internal`，标记 `[ControlDesignToken]`）
Token ID	`"Slider"`
ScopeProvider	`SliderToken.ScopeProvider`
基类	`AbstractControlDesignToken`
TokenKind 类型	`SliderTokenKind`（源码生成）

Token 资源访问方式

在 AXAML 中通过 atom:SliderTokenResource 或 atom:TokenResource 访问：

<!-- 组件级 Token -->
{atom:SliderTokenResource SliderTrackSize}
{atom:SliderTokenResource ThumbCircleSize}
{atom:SliderTokenResource RailBg}

<!-- 全局 Token（SharedToken） -->
{atom:SharedTokenResource ColorPrimary}
{atom:SharedTokenResource ColorBgContainer}

组件级 Token 一览

尺寸 Token

Token 名	类型	默认值 / 来源	说明
`SliderTrackSize`	`double`	`SharedToken.ControlHeightSM / 2`	滑动条控件的高度（包含滑块活动区域）
`RailSize`	`double`	`4`	轨道条高度（细长条）
`MarkSize`	`double`	`8`	刻度标记圆点大小
`ThumbSize`	`double`	计算值（`ThumbCircleSizeHover + 边框 + outline`）	Thumb 推荐的最大尺寸，用于布局
`ThumbCircleSize`	`double`	`SharedToken.ControlHeightLG / 4`	滑块圆形尺寸（默认态）
`ThumbCircleSizeHover`	`double`	`SharedToken.ControlHeightSM / 2`	滑块圆形尺寸（悬浮态），比默认态略大
`ThumbCircleBorderThickness`	`Thickness`	`SharedToken.LineWidth + 1`	滑块边框宽度（默认态）
`ThumbCircleBorderThicknessHover`	`Thickness`	`SharedToken.LineWidth + 1.5`	滑块边框宽度（悬浮态），比默认态略粗

轨道颜色 Token

Token 名	类型	默认值 / 来源	说明	影响范围
`RailBg`	`Color`	`SharedToken.ColorFillTertiary`	轨道底层背景色（灰色）	轨道未覆盖部分的颜色
`RailHoverBg`	`Color`	`SharedToken.ColorFillSecondary`	轨道底层悬浮态背景色	鼠标悬浮时轨道底层颜色加深
`TrackBg`	`Color`	`SharedToken.ColorPrimaryBorder`	轨道已覆盖部分背景色（主色）	从 Minimum 到 Value 的高亮部分
`TrackHoverBg`	`Color`	`SharedToken.ColorPrimaryBorderHover`	轨道已覆盖部分悬浮态背景色	鼠标悬浮时高亮部分颜色变化
`TrackBgDisabled`	`Color`	`SharedToken.ColorBgContainerDisabled`	轨道禁用态背景色	禁用时高亮部分变灰

刻度标记颜色 Token

Token 名	类型	默认值 / 来源	说明	影响范围
`MarkBorderColor`	`Color`	`SharedToken.ColorBorderSecondary`	刻度标记圆点边框颜色（默认态）	未被覆盖范围内的刻度标记
`MarkBorderColorHover`	`Color`	`SharedToken.ColorFillContentHover`	刻度标记圆点悬浮态颜色	鼠标悬浮在轨道时刻度标记变化
`MarkBorderColorActive`	`Color`	`SharedToken.ColorPrimaryBorder`	刻度标记激活态颜色（主色）	被覆盖范围内的刻度标记

滑块颜色 Token

Token 名	类型	默认值 / 来源	说明	影响范围
`ThumbCircleBorderColor`	`Color`	`SharedToken.ColorPrimaryBorder`	滑块圆形边框颜色（默认态）	滑块正常显示时的边框
`ThumbCircleBorderHoverColor`	`Color`	`SharedToken.ColorPrimaryBorderHover`	滑块边框悬浮态颜色	鼠标悬浮在 Slider 区域但未悬浮在滑块上时
`ThumbCircleBorderActiveColor`	`Color`	`SharedToken.ColorPrimary`	滑块边框激活态颜色	`:pointerover` 和 `:focus` 状态
`ThumbCircleBorderColorDisabled`	`Color`	混合计算（`ColorTextDisabled` over `ColorBgContainer`）	滑块禁用颜色	禁用态的滑块边框
`ThumbOutlineColor`	`Color`	基于 `ColorPrimary` 的 20% 透明度	滑块 outline 环颜色	聚焦/悬浮时的外圈光晕效果
`ThumbOutlineThickness`	`Thickness`	`SharedToken.WaveAnimationRange`	outline 环厚度	聚焦/悬浮时外圈光晕的粗细

内边距 Token

Token 名	类型	默认值 / 来源	说明	影响范围
`SliderPaddingHorizontal`	`Thickness`	`(SliderTrackSize/2, (ControlHeight-SliderTrackSize)/2)`	水平方向内边距	水平 Slider 的上下和左右内间距
`SliderPaddingVertical`	`Thickness`	`((ControlHeight-SliderTrackSize)/2, SliderTrackSize/2)`	垂直方向内边距	垂直 Slider 的上下和左右内间距
`MarginPartWithMark`	`Thickness`	`(0, 0, 0, ControlHeightLG-SliderTrackSize)`	有刻度标记时的额外边距	当存在 Marks 时为标签文字留出空间

Token 派生关系图

SharedToken (全局 DesignToken)
├── ControlHeightLG ──────► ThumbCircleSize = ControlHeightLG / 4
├── ControlHeightSM ──────► ThumbCircleSizeHover = ControlHeightSM / 2
│                          └► SliderTrackSize = ControlHeightSM / 2
├── LineWidth ────────────► ThumbCircleBorderThickness = LineWidth + 1
│                          └► ThumbCircleBorderThicknessHover = LineWidth + 1.5
├── ColorFillTertiary ────► RailBg
├── ColorFillSecondary ───► RailHoverBg
├── ColorPrimaryBorder ───► TrackBg, MarkBorderColorActive, ThumbCircleBorderColor
├── ColorPrimaryBorderHover ► TrackHoverBg, ThumbCircleBorderHoverColor
├── ColorPrimary ─────────► ThumbCircleBorderActiveColor
│                          └► ThumbOutlineColor (20% opacity)
├── ColorBorderSecondary ─► MarkBorderColor
├── ColorFillContentHover ► MarkBorderColorHover
├── ColorBgContainerDisabled ► TrackBgDisabled
├── ColorTextDisabled + ColorBgContainer ► ThumbCircleBorderColorDisabled
├── WaveAnimationRange ───► ThumbOutlineThickness
└── ControlHeight ────────► SliderPaddingHorizontal, SliderPaddingVertical

引用的全局 Token（通过 SharedTokenResource 直接使用）

除组件级 Token 外，Slider 主题中还直接引用了以下全局 Token：

SharedToken	使用位置	说明
`EnableMotion`	SliderTheme, SliderTrackTheme	控制是否启用过渡动画
`ColorBgContainer`	SliderThumbTheme	滑块的白色背景填充
`ColorBgElevated`	SliderTrackTheme	刻度标记圆点的背景色
`ColorText`	SliderTrackTheme	刻度标签文字颜色（正常态）
`ColorTextDisabled`	SliderTrackTheme	刻度标签文字颜色（禁用态）

暗黑模式

SliderToken.CalculateTokenValues(bool isDarkMode) 接收 isDarkMode 参数，所有颜色值从 SharedToken 派生，而 SharedToken 在暗黑模式下会自动使用 DarkThemeVariantCalculator 计算的暗色系色彩。因此 Slider 在暗黑模式下无需额外处理，颜色会自动适配。

7.2 KiB Raw Blame History Unescape Escape