# 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:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![ryanprel](https://avatars.discourse-cdn.com/v4/letter/r/7c8e57/32.png) [@ryanprel](https://discourse.nodered.org/u/ryanprel)
#### Post date: [29 June 2024 15:45 UTC](https://discourse.nodered.org/t/dashboardv2-numeric-node/89093/1 "2024-06-29T15:45:54Z")

</div>

I'm working on transitioning from DashboardV1 to Dashboard V2 and one of the things I'm missing is the ability to create a Numeric node from V1. Attached is an example. I use this for setting the range for chilling a fermentation tank. I'm open to other options for setting this up but the numeric node worked well enough for me. Am I missing something or is it not available?

![Screenshot 2024-06-29 at 10.27.33 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f2c58cf901bf0b93257ea16879fcced134720631.png)

![Screenshot 2024-06-29 at 10.45.22 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9be20146df92bcdeb1ec003f72c3e88c7cd9388e.png)

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [29 June 2024 16:00 UTC](https://discourse.nodered.org/t/dashboardv2-numeric-node/89093/2 "2024-06-29T16:00:24Z")

</div>

Vuetify doesn't have numeric but it's coming as far I know. So probably takes a bit to wait.

---

<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

---

<div class="post-metadata">

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

</div>

As @arturv2000 has shared (thanks!) its on our todo list as "Up Next", so should be released within Dashboard within the next couple of weeks

---

<div class="post-metadata">

### Author: ![ryanprel](https://avatars.discourse-cdn.com/v4/letter/r/7c8e57/32.png) [@ryanprel](https://discourse.nodered.org/u/ryanprel)
#### Post date: [29 June 2024 16:37 UTC](https://discourse.nodered.org/t/dashboardv2-numeric-node/89093/5 "2024-06-29T16:37:27Z")

</div>

Thanks guys - I'm not in a hurry for this element, just need it in time for grape harvest in September and I can hold off a few weeks on finishing the conversion. I'll also be using it for my microgreens watering system to set the dosing time.

 ![Screenshot 2024-06-29 at 11.20.59 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/379cbffc5702791664ed7531856c19fe9d8f42e0.png)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [13 July 2024 16:37 UTC](https://discourse.nodered.org/t/dashboardv2-numeric-node/89093/6 "2024-07-13T16:37:46Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
