Pages

自定义滑块（Custom Slider）

Custom Slider（自定义滑块） 是一个交互式控件，允许用户通过在轨道上拖动滑块来直观地调整数值。
它可以绑定到变量（例如通过 CODESYS、MQTT 等）并实时影响系统参数。

概述

Custom Slider 提供了一种从界面上直接调整数值的直观方式。
支持实时变量绑定，用户可以精准控制参数（如速度、亮度或温度），并立即生效。

主要功能

变量绑定

• 连接实时数据源（如 CODESYS、MQTT）
• 用户操作滑块时，自动发送更新的数值

可交互的滑块控件

• 拖动滑块拇指（thumb）来改变值
• 支持“对齐至步长”功能，保持数值一致性（可选）

实时数值显示

• 可在滑块旁边或内部显示当前数值
• 支持单位后缀（如 %、°C、rpm）以增强可读性

自定义范围与步长

• 定义最小值、最大值和步长
• 实现对数值范围的精细控制

自定义标签与刻度线

• 添加文字标签或刻度标记以提供视觉参考
• 有助于用户理解滑块的范围与功能

可配置外观

• 支持颜色、尺寸、方向（横向/纵向）和轨道样式的自定义

应用场景

参数调整

• 示例：在自动化界面中调整电机转速或系统增益

环境控制

• 示例：设定 HVAC 系统的温度目标值

用户偏好

• 示例：交互式设置亮度或音量

SVG ID 参考表

使用以下 SVG ID 将动态数值绑定到 Custom Slider 中的元素：

例子:

 <rect id="barPath" x="83" y="26" width="629" height="21" rx="10.5" ry="10.5" style="fill: #3c3e41"/>
  <rect id="barLFill" x="83" y="26" width="314" height="21" rx="10.5" ry="10.5" style="fill: #3c0ad9"/>
  <g id="thumb">
    <circle cx="301.5" cy="35" r="35" style="fill: #efefef; filter: url(#filter-8)"/>
    <circle cx="301.5" cy="35" r="35" style="fill: #3c3e41"/>
  </g>