Node-RED中Slider滑杆和Numeric数值输入组件的使用

场景

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121884766

Node-RED怎样导出导入流程为json文件：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124130985

Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121992760

在上面的基础上怎样使用Slide滑杆组件和Numeric数值组件。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、Slider组件可以拖动滑杆来输入最大/最小范围之间的值。

拖拽一个组件并编辑

 

 

2、Numbic元件也可以输入数值资料，这是使用上/下按钮来输入数值。

拖拽一个Numbic元件并编辑

 

 

 

3、json数据

[
    {
        "id": "24bfd0cfc8d00b23",
        "type": "ui_numeric",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "label": "输入成绩: ",
        "tooltip": "",
        "group": "248cbbb0.18e794",
        "order": 3,
        "width": 0,
        "height": 0,
        "wrap": false,
        "passthru": true,
        "topic": "topic",
        "topicType": "msg",
        "format": "{{value}}",
        "min": 0,
        "max": "100",
        "step": 1,
        "className": "",
        "x": 280,
        "y": 260,
        "wires": [
            [
                "f21d40d0a18a6f6c"
            ]
        ]
    },
    {
        "id": "248cbbb0.18e794",
        "type": "ui_group",
        "name": "MyGroup",
        "tab": "3f79c420.cfc1bc",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "3f79c420.cfc1bc",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

4、访问ui页面

http://127.0.0.1:1880/ui

 

 

拖动条和调整数值时会输出