滑块小组件 (可应用主题)
滑块小组件会显示一个滑块元素，以便用户在混搭中输入数字。可启用范围选择，以允许用户指定最小值和最大值。
小组件剖析
下图显示了滑块小组件的不同部分。
1. 小组件标签
2. 值标签
3. 拖动控制滑块
4. 滑块轨道
5. 最小值和最大值标签
 | “滑块”小组件可用作平台中的标准小组件，也可用作可从 SDK 导入的 web 组件。 |
启用范围选择模式
可启用小组件 RangeSelection 属性，以允许用户在运行时选择某一范围的值。启用范围选择后，两个手柄可用于指示滑块上值范围的起点和终点。可使用小组件 Value 和 EndValue 属性来指定这些值。要根据滑块值的更改执行服务，请将 EndValueChanged 和 ValueChanged 事件绑定至混搭中的其他小组件、函数或数据服务。例如，可通过定义值范围来筛选某一服务的数据，该服务可用于检索与工厂车间可用资源相关的信息。
启用步进模式
可通过将小组件 Stepping Mode 属性设置为 true，在滑块轨道上启用增量步进模式。定义滑块上的增量步长有助于用户了解轨道值的比例，从而更加轻松地将手柄置于特定值处。可通过以下方式之一定义滑块上的增量：
• 要将轨道分割为多个增量，请使用 NumberOfSteps 属性。
• 要设置步长大小，请使用 StepSize 属性。
例如，可为滑块小组件定义 5 分钟增量，以设置在混搭中更新数据所需的时间。运行时，手柄会自动捕捉至沿滑块轨道定义的各个步长。
启用垂直模式
可通过将小组件 VerticalSlider 属性设置为 true 启用垂直模式。
启用可编辑值
可通过将小组件 EditableValue 属性设置为 true 启用值编辑模式。在此配置中，用户可在值标签中键入值，而无需移动手柄。要更改滑块的值，请双击值标签，然后键入一个值。手柄位置会基于新值自动更改。
设置小组件样式
可在“样式属性”面板中编辑所有样式属性。可在不同状态下自定义多个部分的小组件颜色、字体、形状和大小。
• Slider 类别可用于编辑背景、前景和条形颜色。
• Thumb 类别可用于编辑滚动块或拖动手柄的样式和颜色。
• Min-Max Label 类别可用于编辑最小最大标签的标签样式字体和颜色。
• Track 类别可用于编辑轨道背景的颜色。
小组件属性
下表列出了“滑块”小组件的属性。
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定? (Y/N) | 是否可本地化? (Y/N) | ||
|---|---|---|---|---|---|---|---|
label | 滑块标签的显示文本。 | STRING | 不适用 | Y | Y | ||
labelAlignment | “左”、“右”或“居中”对齐小组件标签。 | STRING | 左 | Y | N | ||
LabelType | 将标签类型设置为“标题”、“子标题”、“标签”或“正文”。 | STRING | 标签 | Y | N | ||
Value | 设置或绑定滑块值。
| NUMBER | 不适用 | Y | N | ||
CustomClass | 定义 CSS 以应用于小组件顶层 div。输入多个类时，请以空格分隔每个类。 | STRING | 不适用 | Y | N | ||
TabSequence | 设置按 TAB 键时突出显示小组件的顺序。 | NUMBER | 不适用 | N | N | ||
EndValue | 在范围选择模式下时，第二个手柄的滑块值。 | NUMBER | 不适用 | Y | N | ||
EndValueChanged | 在更改滑块的结束值时触发事件。 | 不适用 | 不适用 | Y | N | ||
Minimum | 设置滑块的最小值。 | NUMBER | 0 | Y | N | ||
Maximum | 设置滑块的最大值。 | NUMBER | 100 | Y | N | ||
SteppingMode | 选择在每次单击时滑块移动的特定步数。 | BOOLEAN | False | N | N | ||
StepSize | 设置滑块每移动一步其值所发生的变化。
| NUMBER | 不适用 | Y | N | ||
NumberOfSteps | 设置每次单击时滑块移动的步数。
| NUMBER | 不适用 | Y | N | ||
ValuePrecision | 设置滑块值小数点后面所要显示的小数位数。 | NUMBER | 不适用 | N | N | ||
DisplayValueLabel | 将滑块值标签的显示选项设置为“是”、“否”或“拖动时”。 | STRING | 是 | N | N | ||
EditableValue | 可供用户通过在混搭中编辑值标签来移动手柄。 | BOOLEAN | False | N | N | ||
DisplayMinMaxLabels | 显示最小值和最大值的标签。 | BOOLEAN | True | N | N | ||
HandleSize | 设置手柄大小 (以像素为单位)。 | NUMBER | 不适用 | N | N | ||
TrackSize | 设置轨道大小 (以像素为单位)。 | NUMBER | 不适用 | N | N | ||
TrackAlignment | 将轨道与滑块进行“居中”、“开始”或“结束”对齐。 | STRING | 居中 | N | N | ||
FullTrack | 延伸滑块轨道，使其完全包含手柄图标。 | BOOLEAN | False | Y | N | ||
MinValueLabel | 指定最小值的标签。 | STRING | MIN | Y | Y | ||
MaxValueLabel | 指定最大值的标签。 | STRING | MAX | Y | Y | ||
HandleIcon | 控制手柄图标的形状：“无”、“圆形”或“拆分”。 | STRING | 圆形 | N | N | ||
SecondHandleIcon | 将第二个手柄图标的媒体实体选为“无”、“圆形”或“拆分”。 | STRING | 圆形 | N | N | ||
MinSideIcon | 指定最小值一侧的图标。 | MEDIA ENTITY | 不适用 | N | N | ||
MinIconSize | 控制最小值图标的大小。选项包括：“小”、“中”、“大”或“超大”。 | STRING | 中 | Y | N | ||
MaxSideIcon | 选择最大值一侧的图标。 | MEDIA ENTITY | 不适用 | N | N | ||
MaxIconSize | 控制最大值图标的大小。选项包括：“小”、“中”、“大”或“超大”。 | STRING | 不适用 | Y | N | ||
RangeSelection | 添加第二个手柄，并在滑块上启用范围选择。 | BOOLEAN | False | N | N | ||
VerticalSlider | 将滑块方向更改为垂直。 | BOOLEAN | False | N | N | ||
ReverseMinMaxValues | 反转最小值和最大值的位置。 | BOOLEAN | False | N | N | ||
ReverseLabelPosition | 反转最小值和最大值的标签位置 | BOOLEAN | False | N | N | ||
OverlapHandle | 启用范围选择时，允许两滑块手柄重叠。 | BOOLEAN | False | N | N | ||
ValueChanged | 当滑块值发生更改时触发事件。 | 不适用 | 不适用 | Y | N | ||
Increment | 可绑定服务，用于递增滑块值。 | 不适用 | 不适用 | Y | N | ||
Decrement | 可绑定服务，用于递减滑块值。 | 不适用 | 不适用 | Y | N | ||
IncrementSecondHandle | 可绑定服务，用于在启用范围选择模式时递增第二个手柄的值。 | 不适用 | 不适用 | Y | N | ||
DecrementSecondHandle | 可绑定服务，用于在启用范围选择模式时递减第二个手柄的值 | 不适用 | 不适用 | Y | N | ||
Disabled | 禁用混搭中的小组件。小组件仍处于可见状态，但无法与其交互。 | BOOLEAN | False | Y | N | ||
HandleTooltipField | 在滑块手柄上悬停时显示工具提示文本。 | STRING | 不适用 | Y | Y | ||
HandleTooltipIcon | 设置滑块手柄的工具提示的图标图像。 | MEDIA ENTITY | 不适用 | N | N | ||
SecondHandleTooltipField | 在滑块第二个手柄上悬停时显示工具提示文本。
| STRING | 不适用 | Y | Y | ||
SecondHandleTooltipIcon | 设置滑块第二个手柄的工具提示的图标图像。
| MEDIA ENTITY | 不适用 | N | N |
验证滑块小组件数据
使用单项选择或范围选择时，可通过验证属性设置最小值和最大值：
要配置默认失败消息，请使用 MinValueFailureMessgae 和 MaxValueFailureMessgae 属性。
有关常用验证属性的详细信息，请参阅将验证应用于小组件。
下表列出了 ThingWorx 9.3.4 或更高版本中“验证”面板上提供的验证属性。
属性 | 说明 | 基本类型 | 默认值 | 是否可绑定 (Y/N) | 是否可本地化 (Y/N) |
|---|---|---|---|---|---|
CriteriaMessage | 有关验证条件以及验证失败时显示的消息。 | STRING | 不可用 | Y | Y |
CriteriaMessageDetails | 针对验证条件和失败消息显示的详细信息。 | STRING | 不可用 | Y | Y |
MaxValidValue | 用户可设置验证的最大滑块值。 | STRING | 不可用 | Y | N |
MaxValueFailureMessage | 滑块值大于最大有效值时显示的消息。 | NUMBER | ${value} is the maximum value | Y | Y |
MinValidValue | 用户可设置验证的最小滑块值。 | STRING | 不可用 | Y | N |
MinValueFailureMessgae | 滑块值小于最小有效值时显示的消息。 | NUMBER | ${value} is the minimum value | Y | Y |
ShowValidationCriteria | 编辑滑块时显示有关所需输入的提示消息。 | BOOLEAN | False | Y | N |
ShowValidationFailure | 当输入的值验证失败时，显示失败消息。 | BOOLEAN | False | Y | N |
ShowValidationSuccess | 当输入的值验证成功时，显示成功消息。 | BOOLEAN | False | Y | N |
SucessMessgae | 值有效时显示的消息 | STRING | 不可用 | Y | Y |
SuccessMessageDetails | 二级消息，显示关于验证成功消息的更多信息。 | STRING | 不可用 | Y | Y |
Validate | 更改小组件值时触发的可绑定事件。将此事件绑定至服务或函数以应用验证模式或表达式。 | 事件 | 不可用 | Y | N |
ValidationCriteriaIcon | 针对关于验证条件的提示消息，选择在其中显示的 SVG 图标。 | IMAGELINK | info | N | N |
ValidationFailureIcon | 设置验证失败时显示在状况消息中的 SVG 图标。 | IMAGELINK | error | N | N |
ValidationOutput | 检索小组件验证的输出。返回值为 Undefined、Valid、Unvalidated 或 Invalid。 | STRING | 不可用 | Y | N |
ValidationState | 用于设置验证状态的可绑定属性。可将此属性设置为 Undefined 、Unvalidated、Valid 和 Invalid。 | STRING | Undefined | Y | N |
ValidationSuccessIcon | 选择验证成功时显示在状态消息中的 SVG 图标。 | IMAGELINK | success | N | N |