滑块是一类支持通过左右拖拽交互输入特定数值的交互组件广泛应用于音量调节、色彩亮度调控、速度档位切换、数值增减设置等场景。1️⃣动图效果元件库共提供以下四种滑块样式可按需选用圆形滑块最通用的滑块形态交互触点为圆形左右拖动时将同步变更游标尺长度触点当前位置对应实时数值。方形滑块功能逻辑与圆形滑块完全一致仅将交互触点由圆形调整为方形样式。音量滑块在圆形滑块基础上集成了音量可视化反馈效果。当数值为0时喇叭图标同步呈现静音状态、数值同步显示为0随着数值提升喇叭图标的音量标识也会对应逐级放大。无底色滑块在方形滑块基础上移除了游标尺底色新增刻度标识采用全新的刻度尺展示形式。2️⃣使用方法前往【元件库-滑块】分类下选择所需的滑块组件直接拖拽至原型画布即可使用无需额外配置。若需获取滑块实时取值可调用组件内置的「选取数值」Label变量该变量会同步记录滑块当前数值可直接用于交互逻辑判断或赋值给其他组件实现数据联动。组件默认取值范围为0~100由「起始值」和「终止值」两个Label限定。若需自定义取值范围直接修改这两个Label内的对应数值即可生效。3️⃣制作方法制作思路滑块的移动效果依赖「移动Move」交互动作实现。在Axure中仅动态面板支持拖拽交互事件因此需用动态面板包裹代表滑块的基础图形可根据需求选择圆形、方形或其他自定义形状。完成可拖拽的滑块组件后需设置滑块的移动轨道即刻度尺。刻度尺内需配置一条随滑块移动同步变更长度的线段用于直观展示滑块已移动的距离该线段即为游标尺。刻度尺本身限定了滑块的可移动范围需保证滑块不会超出轨道边界可通过「移动Move」交互动作的边界属性将滑块的移动范围限制在刻度尺区间内。完成以上三步即可实现基础的滑块功能。为提升组件的易用性与可扩展性可额外配置变量记录滑块实时数值、起始点与终止点数值既支持向外输出滑块取值也支持灵活调整组件的取值范围。组件结构完整的滑块组件由三部分构成1. 滑块动态面板用于包裹滑块触点为滑块提供拖拽交互能力的核心载体。2. 刻度尺刻度尺由游标尺与游标尺底色两部分组成游标尺通常填充主题色长度随滑块位置动态调整直观呈现滑块已移动的进度。游标尺底色通常填充背景色固定长度对应滑块的全部可移动范围。3. 组件变量组件内置三个变量包含1个动态变量选取数值与2个静态变量起始值、终止值选取数值动态更新实时记录滑块当前位置对应的数值。起始值对应滑块最左侧位置的数值默认处于隐藏状态。终止值对应滑块最右侧位置的数值默认处于隐藏状态。交互逻辑1. 滑块拖拽与移动交互事件拖拽滑块动态面板时仅允许其跟随鼠标在X轴方向水平移动核心配置要点为设置滑块动态面板的左右移动边界。滑块的可移动起点需对齐游标尺底色的左侧坐标点终点需对齐游标尺底色的右侧坐标点因此滑块的移动范围需满足大于等于游标尺底色的左侧坐标小于等于游标尺底色的右侧坐标。由于滑块的中心点为取值的计算基准实际边界限定需调整为滑块中心点坐标≥游标尺底色左侧坐标且滑块中心点坐标≤游标尺底色右侧坐标。滑块移动过程中需同步更新当前位置对应的数值计算逻辑如下首先计算单位刻度对应的游标尺长度作为基准值再用滑块当前对应的游标尺长度除以该基准值得到滑块的相对刻度值舍去小数部分后与起始数值相加即可得到滑块最终的绝对数值。2. 滑块点击样式为提升交互反馈点击滑块时可设置专属点击样式明确告知用户已选中滑块。配置方式简单仅需将滑块的边框加粗即可实现。4️⃣要点总结所有需要拖拽交互的场景均需搭配动态面板实现拖拽交互是动态面板的专属能力。通过配置起始值、终止值变量可大幅提升滑块组件的灵活性与适配性。