在配置表单时，若想使用 range（滑块）组件并使其带有显示数字的功能，可以通过以下方式实现：

在表单项中定义一个 range 类型的组件。
使用额外的文本展示功能（如标签）来实时显示当前滑块的值。

以下是一个简单的配置示例：

[
  {
    "label": "滑块",
    "type": "range",
    "name": "range1"
  }
]

在前端界面中，为了实时显示滑块的数值，可以在页面上添加一个与滑块绑定的标签。例如，在 HTML 和 JavaScript 的实现中，可以通过如下代码实现动态显示：

<!-- 滑块组件 -->
<input type="range" id="range1" name="range1" min="0" max="100" value="50">
<!-- 显示当前数值的标签 -->
<p>当前值: <span id="rangeValue">50</span></p>

<script>
  // 获取滑块和显示值的元素
  const range = document.getElementById('range1');
  const rangeValue = document.getElementById('rangeValue');

  // 监听滑块变化事件
  range.addEventListener('input', function () {
    // 更新显示的值
    rangeValue.textContent = range.value;
  });
</script>

上述代码中：

<input> 标签定义了一个滑块组件，并设置了其范围为 0 到 100，默认值为 50。
<p> 标签用于显示滑块的当前值。
JavaScript 部分监听了滑块的 input 事件，当滑块值发生变化时，更新页面上显示的数值。

通过类似的方法，可以实现在你的应用或系统中为滑块组件添加数值显示功能。

补充回答 1

在 Hamibot 的配置模式中，使用 type: "range" 的表单组件时，虽然原生的 JSON 配置不直接支持“滑块后边显示数值”的功能，但你可以在脚本运行时通过额外绘制一个浮动窗口或日志信息来实现这个效果。

✅ Hamibot 配置示例

首先，在你的 config.json 中定义一个 range 类型的字段：

[
  {
    "label": "选择数值",
    "name": "sliderValue",
    "type": "range",
    "min": 0,
    "max": 100,
    "step": 1,
    "value": 50
  }
]

这个配置会在 Hamibot 的配置界面生成一个滑块，用户可以选择 0 到 100 的值。

✅ 脚本中读取并显示当前值

然后，在你的脚本中读取这个值，并通过悬浮窗或 toastLog 实时显示它：

// 文档地址 https://docs.hamibot.com/
const { sliderValue } = hamibot.env;

toastLog("你选择的滑块值是：" + sliderValue);

🔥 进阶：实时显示滑块值（需浮窗权限）

如果你希望在运行脚本时实时显示滑块的值（例如在屏幕上绘制一个浮动显示），可以使用 floaty 和 canvas 组件实现。下面是一个示例代码：

auto.waitFor();

let window = floaty.window(
  <vertical padding="10">
    <text id="sliderText" textSize="16">当前值：50</text>
    <seekbar id="slider" min="0" max="100" progress="50"/>
  </vertical>
);

window.setSize(300, -2); // 自动高度
window.setPosition(100, 100);

// 监听滑块变化
window.slider.on("progressChanged", function(currentProgress) {
  window.sliderText.setText("当前值：" + currentProgress);
});

toastLog("你可以拖动屏幕上的滑块查看实时值");

📌 总结

Hamibot 的 range 表单组件本身不会在界面上实时显示数值，但你可以：

在脚本中通过 hamibot.env.sliderValue 获取滑块值；
使用 toastLog() 显示一次；
或者使用 floaty 创建自定义界面实现实时显示滑块值。

如果你需要更复杂的交互，建议结合 HTML/CSS/JS 开发前端逻辑并通过桥接方式与 Hamibot 脚本通信。