适用:用户需要直观看到已选值与整体跨度关系的场景,比如图片缩放比例尺。
不适用:随意录入数字或选择指定选项,且整体跨度对用户而言不具备参考意义的场景,比如工时的录入
数值或区间可为连续值或离散值,通常用于比例选择场景。
需要设计师根据实际需求来设定滑轨的:最小值、最大值、初始值、刻度
滑动过程中用户应得到即时的反馈,直观看到已选值与整体跨度的关系
对于带刻度的输入条,当容器宽度不足时,中间的刻度值消失,但两端的刻度值始终显示
Hover 与 拖拽状态下,需 Tooltip
展示明确的结点数值
类型 | 何时使用 |
---|---|
连续值 | 用户可自由地选择整体跨度内的任意节点/区间 |
离散值 | 用户只能选择特定节点/区间 |
用户自由拖拽滑块选择节点/区间
滑动区域设定特定节点作为可选刻度
滑动过程中滑块自动捕捉距离最近的节点
整体跨度+刻度
整体跨度的最小值/最大值(可选)
刻度(离散型必须有刻度)
已选值
操作把手+结点值
操作把手既是用户操作的对象,也是当前选值
结点值:鼠标 hover 或拖拽时显示
方式1:拖动滑块来调整
拖拽过程中随时显示准确数值。
连续型:跟随用户鼠标
离散型:非严格跟随用户鼠标,而是系统自动定位距离当前刻度最近的刻度。
在选择区间的场景下,开始结点/结束结点是相对,而非绝对。因此允许用户拖拽开始结点到最右边变为结束结点,反之亦然。
方式2:点击滑块外轨道任意结点,自动定位到特定位置。
其他方式:配合其他组件完成,比如输入框等等,根据业务需要选择。
备注:以上调整方式可任意组合使用。