滑块

1. 组件概述

滑块是一个数据输入组件，用于通过拖动滑块来选择数值。用户可以在设定的范围内直观地调节数值，比传统的数字输入框更加直观和便捷。滑块支持单滑块（选择单个值）和双滑块（选择一个范围）两种模式，还可以在轨道上显示刻度标记，帮助用户更精确地定位数值。适用于需要在一定范围内选择数值的场景，如调节参数、设置区间等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 生成参数调节。在 AI 写作助手应用中，用户可以通过滑块调节”创意程度”参数（0-100），数值越高生成的内容越有创意但可能偏离主题，数值越低则更保守准确。滑块让用户能直观地理解和调节这个抽象参数。
• 场景二：答题难度区间筛选。在智能题库应用中，使用双滑块模式让用户选择题目难度范围（如 1-10 分），用户拖动两个滑块分别设置最低和最高难度，系统根据选定区间筛选出符合条件的练习题。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
绑定变量	组件的变量名，用户选择的数值会以此变量名存储。其他组件可以绑定此变量来显示其值，调用工作流时此变量的值也会传递给工作流。
标题	滑块左侧显示的标签文字，用于说明该滑块的用途，如”音量”、“难度”、“创意程度”等。
双滑块	开启后变为双滑块模式，可以选择一个数值范围（最小值和最大值），而不是单个数值。适用于需要设置区间的场景，如价格范围、难度区间等。
拼接值	仅在双滑块模式下显示。开启后，选中的最小值和最大值会用拼接符连接成一个字符串存储（如”10,50”）；关闭后则存储为包含 min 和 max 的对象。
拼接符	仅在双滑块模式且开启拼接值时显示。设置连接最小值和最大值的符号，默认为英文逗号”,“。例如设置为”-“，则范围 10 到 50 会存储为”10-50”。
默认值	滑块的初始数值。在单滑块模式下设置一个数值；可以设置为静态值或绑定变量。
最小值	滑块轨道的最小边界值，用户无法选择比这个值更小的数值。默认为 0，可以设置为静态值或绑定变量。
最大值	滑块轨道的最大边界值，用户无法选择比这个值更大的数值。默认为 1，可以设置为静态值或绑定变量。
步长	滑块每次移动的最小单位。例如步长设为 5，则滑块只能停在 0、5、10、15… 这些位置。默认为 1。步长越小，可选的数值越精细。
小数位数	数值保留的小数位数，根据四舍五入精确保留设置的位数。例如设置为 2，则数值会保留两位小数（如 3.14）。适用于需要精确小数的场景。
单位	在数值后面显示的单位文字，如”元”、“分”、”%“等。帮助用户理解数值的含义。
值标签	开启后，拖动滑块时会在滑块上方显示当前数值。方便用户在拖动过程中实时查看选择的值。
方向	仅在开启值标签时显示。设置值标签相对于滑块的显示位置，可选：自动、上、下、左、右。默认为自动，系统会根据空间自动选择合适的方向。
可输入	开启后，在滑块旁边显示数字输入框，用户可以直接输入精确数值，而不仅仅是拖动滑块。适用于需要精确输入的场景。
可重置	仅在开启可输入时显示。开启后，在输入框旁边显示重置按钮，点击可将数值恢复到最小值（单滑块）或初始范围（双滑块）。

轨道折叠组

配置项	说明
分割数	将滑块轨道分成若干等份，并在分割点显示刻度线。例如设置为 4，则轨道会被分成 4 等份，显示 5 个刻度点。帮助用户更直观地定位数值。
刻度标记	在轨道上的特定位置显示自定义标记文字。可以为关键数值添加说明，如在 0 处标记”低”、在 100 处标记”高”，让用户更容易理解数值的含义。

状态折叠组

配置项	说明
可见	控制组件是否显示。默认可见。
隐藏	控制组件是否隐藏。与”可见”相反。
禁用	控制组件是否禁用（变灰且不可操作）。
静态展示	开启后，滑块变为只读的纯文本展示模式，不可拖动。适用于详情页或确认页面。
隐藏时删除字段	开启后，当该组件被隐藏时，其值会从表单数据中删除。适用于条件显示的字段，避免提交无关数据。

校验折叠组

配置项	说明
校验规则	设置滑块的校验规则，如必填等。当用户未按要求操作时，会显示相应的错误提示。

事件

配置项	说明
添加事件	支持”值变化”、“获取焦点”、“失去焦点”三种触发事件。“值变化”在用户拖动滑块改变数值时触发，可用于实时响应用户的调节操作；“获取焦点”和”失去焦点”仅在开启”可输入”后生效，当输入框获得或失去焦点时触发。