Slider · 常规状态
240px 轨道高度 2px,滑块 12×12px 圆形描边 2px,右侧显示百分比
50%
50%
25%
25%
75%
75%
0%
0%
100%
100%
Slider · 禁用状态
DB60 → DB30,滑块描边变 DB30,填充轨道变 DB30,百分比文字变 DB30
50%
50%
25%
25%
75%
75%
Slider · 指定节点
240px 等分 10 份,滑块只能在节点停留,节点 6×6px 圆点描边 1px DB60,已过节点 DB60 填充,未过节点 G0 填充
50%
50%
30%
30%
80%
80%
0%
0%
100%
100%
Slider · 指定节点 · 禁用
DB60 → DB30,已过节点和填充轨道均变 DB30
50%
50%
尺寸参数
轨道宽度240px--sl-track-w
轨道高度2px--sl-track-h
轨道圆角1px--sl-track-radius
滑块直径12px--sl-thumb-size
滑块描边2px solid DB60--sl-thumb-border
滑块填充#FFFFFF G0--sl-thumb-fill
滑块阴影0 1px 3px rgba(0,0,0,0.1)thumb_shadow
百分比字号14px / 500--sl-label-font
百分比字体HarmonyOS Sans--font-number
颜色 — 常规状态
已填充轨道#3388FF DB60--DB60
未填充轨道#DDE1EB G20--G20
滑块描边#3388FF DB60--DB60
滑块填充#FFFFFF G0--G0
百分比文字#3388FF DB60--DB60
已过节点DB60 填充 + 1px DB60 描边--DB60
未过节点G0 填充 + 1px DB60 描边--G0 + --DB60
颜色 — 禁用状态
已填充轨道#9EBFFF DB30--DB30
未填充轨道#DDE1EB G20--G20
滑块描边#9EBFFF DB30--DB30
滑块填充#FFFFFF G0--G0
百分比文字#9EBFFF DB30--DB30
已过节点DB30 填充 + 1px DB30 描边--DB30
未过节点G0 填充 + 1px DB30 描边--G0 + --DB30
指定节点
节点数量10--sl-node-count
节点直径6px--sl-node-size
节点描边1px solid DB60--sl-node-border
节点间距24px (240/10)node_gap
步进值10%step_value
节点位置10%, 20%, …, 100%node_positions
停留规则滑块只能在节点上停留snap_to_node
动画
滑块滑动0.15s easetransition_thumb
填充轨道同步滑块transition_fill
返回组件首页