semi-design/packages/semi-foundation/slider/variables.scss

// Color
$color-slider-text-default: var(--semi-color-text-0); // 滑动条文本颜色 - 默认
$color-slider_disabled-text-default: var(--semi-color-disabled-text); // 滑动条禁用文本颜色 - 默认
$color-slider_dot-bg-default: var(--semi-color-white); // 滑动条圆形刻度点颜色 - 默认态
$color-slider_dot-border-active: var(--semi-color-white); // 滑动条圆形刻度点描边颜色 - 按下态
$color-slider_dot-border: var(--semi-color-white); // 滑动条圆形刻度点描边颜色 - 默认态
$color-slider_handle-bg-default: var(--semi-color-white); // 滑动条圆形按钮颜色 - 默认态
$color-slider_handle-bg-hover: var(--semi-color-white); // 滑动条圆形按钮颜色 - 悬停态
$color-slider_handle-border-focus: var(--semi-color-focus-border); // 滑动条圆形描边颜色 - 激活态
$color-slider_handle_disabled-border-hover: var(--semi-color-white); // 禁用滑动条圆形描边颜色 - 悬停态
$color-slider_handle_disabled-border: var(--semi-color-border); // 禁用滑动条圆形描边颜色 - 默认态
$color-slider_mark-text-default: var(--semi-color-text-2); // 滑动条刻度文字颜色
$color-slider_rail-bg-default: var(--semi-color-fill-0); // 滑动条轨道颜色 - 未填充
$color-slider_rail: rgba(0, 0, 0, .65);
$color-slider_track-bg-default: var(--semi-color-primary); // 滑动条轨道颜色 - 已填充
$color-slider_track_disabled-bg: var(--semi-color-primary-disabled); // 禁用滑动条轨道颜色 - 已填充

// Spacing
$spacing-slider-paddingX: 13px; // 滑动条整体水平内边距
$spacing-slider-paddingY: 0; // 滑动条整体垂直内边距
$spacing-slider-margin: 0; // 滑动条整体外边距
$spacing-slider_rail-margin: 0; // 滑动条轨道外边距
$spacing-slider_rail-padding: 0; // 滑动条轨道内边距
$spacing-slider_rail-top: 14px; // 滑动条未填充轨道顶部距离
$spacing-slider_handle-marginTop: 4px; // 滑动条圆形按钮顶部外边距
$spacing-slider_track-top: 14px; // 滑动条已填充轨道顶部距离
$spacing-slider_tooltip-top: -40px; // 滑动条工具提示顶部距离
$spacing-slider_dot-top: 14px; // 滑动条圆形刻度点顶部距离
$spacing-slider_marks-top: 23px; // 滑动条刻度标签顶部距离
$spacing-slider_marks-left: 0; // 滑动条刻度标签左侧距离
$spacing-slider_boundary-top: 30px;
$spacing-slider_boundary_min-left: 0;
$spacing-slider_boundary_max-right: 0;
$spacing-slider_vertical_marks-marginTop: -30px; // 垂直滑动条刻度标签顶部外边距
$spacing-slider_vertical_marks-marginLeft: 29px; // 垂直滑动条刻度标签左侧外边距
$spacing-slider_vertical_marks-reverse-marginLeft: -26px;// 垂直滑动条刻度标签左侧外边距（标签在左侧时）
$spacing-slider_vertical_rail-top: 0; // 垂直滑动条轨道顶部距离
$spacing-slider_vertical_handle-marginTop: 0; // 垂直滑动条原型按钮顶部外边距
$spacing-slider_vertical_handle-marginLeft: -10px; // 垂直滑动条原型按钮左侧外边距

// Radius
$radius-slider_rail: var(--semi-border-radius-small); // 滚动条未填充轨道圆角
$radius-slider_track: var(--semi-border-radius-small); // 滚动条已填充轨道圆角


// Width/Height
$height-slider_wrapper: 32px; // 滚动条容器整体高度
$height-slider_vertical_wrapper: 4px; // 垂直滚动条整体宽度
$height-slider_rail: 4px; // 滚动条未填充轨道高度
$width-slider_handle: 24px; // 滚动条圆形按钮宽度
$width-slider_handle_clicked: 1px; // 滚动条圆形按钮按下后描边宽度
$height-slider_track: 4px; // 滚动条已填充轨道高度
$width-slider_dot: 4px; // 滚动条圆形刻度点宽度
$width-slider_handle_border_disabled: 1px; // 禁用滚动条圆形按钮按下后描边宽度


// Font
$font-slider_rail-fontSize: 14px; // 滚动条轨道文本字号
$font-slider_marks-fontSize: 14px; // 滚动条刻度标签字号
$font-slider_rail-lineHeight: 1.5; // 滚动条轨道文本行高倍数