Slider 设计文档

在连续/离散区间内选值的滑块,支持单值与 range、刻度、垂直方向与全键盘操作。严格对齐 Semi。

← API 文档

使用建议

在连续/离散区间内选值的滑块,支持单值与 range、刻度、垂直方向与全键盘操作。严格对齐 Semi。

Accessibility

ARIA role:slider

  • 根容器 role=group,每个手柄 role=slider + tabindex=0
  • 手柄 aria-valuemin/valuemax/valuenow/aria-orientation
  • range 模式两手柄不交叉(越过自动交换)
  • 拖拽命令式:pointerdown 读一次 rail rect,document 监听 pointermove/up
  • disabled→aria-disabled,手柄 tabindex=-1
  • aria-valuetext 优先 getAriaValueText,其次 ariaValuetext,再次 tipFormatter 输出
  • 数值气泡复用 Tooltip 组件:hover/focus/拖拽显示,tooltipVisible 强制受控

设计变量

变量
默认值
用法
--cd-transition-delay-slider-handle-bg var(--cd-motion-duration-none) 滑动条圆形按钮-背景色-延迟时间
--cd-transition-duration-slider-handle-bg var(--cd-motion-duration-none) 滑动条圆形按钮-背景色-动画持续时间
--cd-transition-function-slider-handle-bg var(--cd-motion-ease-in) 滑动条圆形按钮-背景色-过渡曲线
显示第 1 条-第 3 条,共 3 条
  • 1