适用：用户需要直观看到已选值与整体跨度关系的场景，比如图片缩放比例尺。

不适用：随意录入数字或选择指定选项，且整体跨度对用户而言不具备参考意义的场景，比如工时的录入

通用原则

• 数值或区间可为连续值或离散值，通常用于比例选择场景。

• 需要设计师根据实际需求来设定滑轨的：最小值、最大值、初始值、刻度

• 滑动过程中用户应得到即时的反馈，直观看到已选值与整体跨度的关系

• 对于带刻度的输入条，当容器宽度不足时，中间的刻度值消失，但两端的刻度值始终显示

• Hover 与 拖拽状态下，需 Tooltip 展示明确的结点数值

类型

类型	何时使用
连续值	用户可自由地选择整体跨度内的任意节点/区间
离散值	用户只能选择特定节点/区间

连续值

用户自由拖拽滑块选择节点/区间

离散值

• 滑动区域设定特定节点作为可选刻度

• 滑动过程中滑块自动捕捉距离最近的节点

构成

1. 整体跨度+刻度

   1. 整体跨度的最小值/最大值（可选）

   2. 刻度（离散型必须有刻度）

2. 已选值

   1. 已选择允许根据业务需要，定制其状态颜色

3. 操作把手+结点值

   1. 操作把手既是用户操作的对象，也是当前选值

   2. 结点值：鼠标 hover 或拖拽时显示

行为

四大状态

选择数值/区间

• 方式1：拖动滑块来调整

  • 拖拽过程中随时显示准确数值。

    • 连续型：跟随用户鼠标

    • 离散型：非严格跟随用户鼠标，而是系统自动定位距离当前刻度最近的刻度。

  • 在选择区间的场景下，开始结点/结束结点是相对，而非绝对。因此允许用户拖拽开始结点到最右边变为结束结点，反之亦然。

• 方式2：点击滑块外轨道任意结点，自动定位到特定位置。

  • 特定位置算法：距离用户鼠标点击点最近的刻度

• 其他方式：配合其他组件完成，比如输入框等等，根据业务需要选择。

备注：以上调整方式可任意组合使用。

实践案例

---

样式

布局