# DashboardV2 Numeric node

**URL:** https://discourse.nodered.org/t/dashboardv2-numeric-node/89093
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [29 June 2024 15:45 UTC](https://discourse.nodered.org/t/dashboardv2-numeric-node/89093 "2024-06-29T15:45:54Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)
#### Post date: [29 June 2024 16:07 UTC](https://discourse.nodered.org/t/dashboardv2-numeric-node/89093/3 "2024-06-29T16:07:37Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/95c052491d057f63cb0a4a10e83cb1898726884b.png)

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f02cf35902e5f1025e06d20695b7f41827d470eb.png)

The other solution is to use a `ui-template` node, to use [Number inputs — Vuetify (vuetifyjs.com)](https://vuetifyjs.com/en/components/number-inputs/#installation). It is not part of the official vuetify3 release, but it is in the `labs` and is currently included in DB2.

One example:

```auto
[{"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

> <https://github.com/FlowFuse/node-red-dashboard/issues/41#issue-1772110103>
>
> \### Description
> 
> \<img width="384" alt="Screenshot 2023-06-23 at 21 31 29" src="h…ttps://github.com/flowforge/flowforge-nr-dashboard/assets/99246719/121eb84e-608f-4218-a83e-823b4c019dc2"\>
> 
> Called a "numeric" in the existing Dashboard 1.0. Would be similar to #38, but provide up/down arrows in the UI to modify the value.
> 
> 
> \### Properties
> 
> Existing Dashboard 1.0 Properties:
> 
> \<img width="500" alt="Screenshot 2023-06-23 at 21 29 56" src="https://github.com/flowforge/flowforge-nr-dashboard/assets/99246719/75783627-3c2e-46ba-b23f-f2a4a9e12642"\>
> 
> 
> \### Events
> 
> \- \*\*on-change\*\*: this widget would need to send a message back to Node-RED when it's value is changed/updated
> 
> \### Controls
> 
> \- \*\*enabled\*\*: this widget can be enabled/disabled
> 
> \### Existing Examples
> 
> Would require a custom built piece of HTML/JS
> 
> \### Have you provided an initial effort estimate for this issue?
> 
> I have provided an initial effort estimate

---

_[View the full topic](https://discourse.nodered.org/t/dashboardv2-numeric-node/89093)._