One option is to set the text input node as "number", will show like this
But only when if "focus", and it is not possible to configure range (min/max) and step increment.
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