DashboardV2 Numeric node

One option is to set the text input node as "number", will show like this

image

But only when if "focus", and it is not possible to configure range (min/max) and step increment.

image

The other solution is to use a ui-template node, to use Number inputs — Vuetify (vuetifyjs.com). It is not part of the official vuetify3 release, but it is in the labs and is currently included in DB2.

One example:

[{"id":"b876e60d043c0a3b","type":"ui-template","z":"24612f704ee219f9","group":"583272b857af8e59","name":"","order":2,"width":0,"height":0,"head":"","format":"<template>\n  <div>\n      <v-slider\n        style=\"margin-top: 30px; margin-bottom: 10px\"\n        v-model=\"valueTargetPressure\"\n        show-ticks=\"always\"\n        density=\"compact\"\n        :hide-details=\"true\"\n        step=\"0.1\"\n        :max=\"5.00001\"\n        :min=\"1.0\"\n        tick-size=\"4\"\n        thumb-label=\"always\"\n        :ticks=\"tickLabelsTargetPressure\"\n        label=\"Target Pressure\"\n        @update:model-value=\"sendDataTargetPressure\"\n      ></v-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tickLabelsTargetPressure: {\n          1: '1Bar',\n          2: '2Bar',\n          3: '3Bar',\n          4: '4Bar',\n          5: '5Bar',\n        },\n        valueTargetPressure: 1,\n      }\n    },\n    methods: {\n      sendDataTargetPressure: function (item) {\n        console.log({ topic: 'TargetPressure', payload: item })\n      },\n    },\n  }\n</script>\n<style>\n  .v-card {\n    outline: 5px solid red;\n  }\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1060,"y":1360,"wires":[[]]},{"id":"583272b857af8e59","type":"ui-group","name":"Test Slider","page":"2b8d0e81e32f8641","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"2b8d0e81e32f8641","type":"ui-page","name":"Test Gauge","ui":"f10950b00cebceb1","path":"/page14","icon":"home","layout":"flex","theme":"16d3200ded0b8b52","order":2,"className":"","visible":"true","disabled":"false"},{"id":"f10950b00cebceb1","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"16d3200ded0b8b52","type":"ui-theme","name":"Default Theme","colors":{"surface":"#097479","primary":"#097479","bgPage":"#111111","groupBg":"#333333","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

When it leaves the labs and pass to normal module of vue, there are plans to create a core widget node