# Sliders, color pickers, dropdowns, etc., in Dashboard 2.0 Templates

**URL:** <https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [6 October 2024 17:15 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196 "2024-10-06T17:15:18Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [6 October 2024 17:15 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/1 "2024-10-06T17:15:18Z")

</div>

Sorry if I missed this in the docs (or other posts here)

Can someone explain to me how I might include sliders, color pickers, and dropdowns in my Dashboard 2.0 Template node?

Do I need additional libraries, if so where / how can I install them? Will they be included by default in future releases? And how do I actually include them in the Template node, in terms of syntax?

Thanks

Mat

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [6 October 2024 17:46 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/2 "2024-10-06T17:46:10Z")

</div>

> [@hazymat](#):
>
> Do I need additional libraries

No. As described in the [dashboard docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#template-ui-template), you can use the verify components out of the box.

> Provide custom JS and HTML (including any Vuetify components) to render in the Dashboard

> [@hazymat](#):
>
> sliders

> **[Slider component — Vuetify](https://vuetifyjs.com/en/components/sliders/#usage)**
>
> The slider component can be used as an alternative visualization instead of a number input.

> [@hazymat](#):
>
> color pickers

> **[Color picker component — Vuetify](https://vuetifyjs.com/en/components/color-pickers/#model)**
>
> The color picker component allows users to select a from pre-defined or custom colors using a variety of different i...

> [@hazymat](#):
>
> dropdowns

> **[Select component — Vuetify](https://vuetifyjs.com/en/components/selects/#usage)**
>
> The select component provides a list of options that a user can make selections from.

* * *

The examples on the vuetify pages all have example code (the code button above each live demo) and they have a playground where you can test stuff.

---

<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:** [6 October 2024 17:50 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/3 "2024-10-06T17:50:10Z")

</div>

Sliders I did once

> [@Customize sliders for DB2](https://discourse.nodered.org/t/customize-sliders-for-db2/88844):
>
> A little bit of fun with sliders [{"id":"1c0c26f3ab8a24c8","type":"ui-template","z":"e59576a114c1e493","group":"6f47b8907c5da63a","page":"","ui":"","name":"range","order":5,"width":"6","height":"1","head":"","format":"\<template\>\n \<v-range-slider class=\"range-slider\" v-model=\"value\" step=\"1\" thumb-label=\"true\" show-ticks=\"always\" :ticks=\"tickLabels\" :messages=\"advise\"\>\n \<template v-slot:append\>\n \<v-chip v-model=\"value\"\>\n Range: \<span\>{{rang…

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [6 October 2024 18:45 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/4 "2024-10-06T18:45:12Z")

</div>

Dropdown examples -

```auto
[{"id":"2086b1f86b7ea9cc","type":"group","z":"be4568a984cb4685","name":"Dropdowns","style":{"label":true,"color":"#000000","fill":"#e3f3d3"},"nodes":["686288d9473a0ad7","85ddcad5226e744c","58866c432c8047e0","6a5445d93e54827e","9161cc515f695ecd","f69abba39561daef"],"x":454,"y":79,"w":352,"h":162},{"id":"686288d9473a0ad7","type":"ui-template","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","group":"48fc19d1161f11e6","page":"","ui":"","name":"Menu","order":8,"width":"3","height":"1","head":"","format":"<template>\n <div class=\"d-flex justify-space-around\">\n <v-menu>\n <template v-slot:activator=\"{ props }\">\n <v-btn block color=\"primary\" v-bind=\"props\">\n Select Option 1\n </v-btn>\n </template>\n <v-list>\n <v-list-item v-for=\"(item, index) in items\"\n :key=\"index\"\n :value=\"index\"\n @click=\"send({payload: item.title})\">\n <v-list-item-title>{{ item.title }}</v-list-item-title>\n </v-list-item>\n </v-list>\n </v-menu>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n items: [\n { title: 'Option 1' },\n { title: 'Option 2' },\n { title: 'Option 3' },\n { title: 'Option 4' },\n],\n }),\n }\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":530,"y":120,"wires":[["85ddcad5226e744c"]]},{"id":"85ddcad5226e744c","type":"debug","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","name":"debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":120,"wires":[]},{"id":"58866c432c8047e0","type":"ui-template","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","group":"48fc19d1161f11e6","page":"","ui":"","name":"with icons","order":9,"width":"3","height":"1","head":"","format":"<template>\n <div class=\"d-flex justify-space-around\">\n <v-menu>\n <template v-slot:activator=\"{ props }\">\n <v-btn block color=\"primary\" v-bind=\"props\">\n Select Option 2\n </v-btn>\n </template>\n <v-list>\n <v-list-item-group v-if=\"items.length > 0\">\n <v-list-item v-for=\"(item, index) in items\" :key=\"index\" :value=\"index\"\n @click=\"send({ payload: item.title })\">\n <v-list-item-content class=\"d-flex align-center\">\n <v-list-item-avatar>\n <!-- Use the icon specified in the item object -->\n <v-icon>{{ item.icon }}</v-icon>\n </v-list-item-avatar>\n <v-list-item-title class=\"text-h6\">{{ item.title }}</v-list-item-title>\n </v-list-item-content>\n </v-list-item>\n </v-list-item-group>\n <v-list-item v-else>\n <v-list-item-content>No items available</v-list-item-content>\n </v-list-item>\n </v-list>\n </v-menu>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n items: [\n { title: 'Option 1', icon: 'mdi-check' },\n { title: 'Option 2', icon: 'mdi-account' },\n { title: 'Option 3', icon: 'mdi-star' },\n { title: 'Option 4', icon: 'mdi-alert' },\n],\n }),\n};\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":160,"wires":[["6a5445d93e54827e"]]},{"id":"6a5445d93e54827e","type":"debug","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","name":"debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":160,"wires":[]},{"id":"9161cc515f695ecd","type":"ui-template","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","group":"48fc19d1161f11e6","page":"","ui":"","name":"with url","order":10,"width":"3","height":"1","head":"","format":"<template>\n <div class=\"d-flex justify-space-around\">\n <v-menu>\n <template v-slot:activator=\"{ props }\">\n <v-btn block color=\"primary\" v-bind=\"props\">\n Select Option 3\n </v-btn>\n </template>\n <v-list>\n <v-list-item v-for=\"(item, index) in items\" :key=\"index\" :value=\"index\" @click=\"send({ payload: item.url })\">\n <v-list-item-content class=\"d-flex align-center\">\n <v-list-item-avatar>\n <!-- Use the icon specified in the item object -->\n <v-icon>{{ item.icon }}</v-icon>\n </v-list-item-avatar>\n <v-list-item-title class=\"text-h6\">{{ item.title }}</v-list-item-title>\n </v-list-item-content>\n </v-list-item>\n </v-list>\n </v-menu>\n </div>\n</template>\n\n<script>\n export default {\n data: () => ({\n items: [\n { title: 'Option 1', icon: 'mdi-check', url: 'https://example.com/option1' },\n { title: 'Option 2', icon: 'mdi-account', url: 'https://example.com/option2' },\n { title: 'Option 3', icon: 'mdi-star', url: 'https://example.com/option3' },\n { title: 'Option 4', icon: 'mdi-alert', url: 'https://example.com/option4' },\n],\n }),\n};\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":200,"wires":[["f69abba39561daef"]]},{"id":"f69abba39561daef","type":"debug","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","name":"debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":200,"wires":[]},{"id":"48fc19d1161f11e6","type":"ui-group","name":"Test","page":"19eb6d108e9275e2","width":"20","height":"13","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"ae3d4aeb3f977a90","path":"/examples","icon":"","layout":"tabs","theme":"a965ccfef139317a","order":3,"className":"","visible":true,"disabled":"false"},{"id":"ae3d4aeb3f977a90","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

---

<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:** [6 October 2024 20:16 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/5 "2024-10-06T20:16:35Z")

</div>

Just to add to Steve's answer, we also have some template examples that use the Vuetify widgets too in the docs here:

> **[Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#vuetify-widgets)**
>
> Harness the power of ui-template in Node-RED Dashboard 2.0 to design custom widgets and unique dashboard layouts.

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [6 October 2024 20:40 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/6 "2024-10-06T20:40:25Z")

</div>

Thanks all for the answers. Really useful - I can see it's going to be easy to use - just needed that little pointer to get me started.

---

<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:** [6 October 2024 20:50 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/7 "2024-10-06T20:50:12Z")

</div>

We're to help 👍

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [6 October 2024 21:06 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/8 "2024-10-06T21:06:24Z")

</div>

Ok so I have this:

` <v-slider v-model="value.setting.brightness" :min="0" :max="100" :step="value.resolution" @change="send({sysaction: 'bri', topic: key, brightness: value.setting.brightness, zone: msg.zoneid})" />`

The slider is rendering correctly and binding to the input value, however no message is being sent out when I move the slider.

What have I done wrong?

---

<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:** [7 October 2024 10:42 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/9 "2024-10-07T10:42:17Z")

</div>

Annoyingly, it seems like the `v-slider` doesn't emit a `@change` event: [https://vuetifyjs.com/en/api/v-slider/#api](https://vuetifyjs.com/en/api/v-slider/#api)

The alternative, and universal method is to react to changes to the `v-model`, which isn't intuitive to write, but does work across all widgets, which is:

`@update:modelValue="send(...)"`

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [7 October 2024 17:25 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/10 "2024-10-07T17:25:56Z")

</div>

Thanks - and here's one more. It doesn't send anything on the output. Did I get the syntax wrong?

` <v-color-picker v-if="value.controltype == '3_RGB'" v-model="value.colour" hide-canvas show-swatches @change="send({sysaction: 'col', topic: key, colour: value.colour, zone: msg.zoneid})" mode="hexa" />`

(Ignore the `v-if`, that works fine. In cases where that evaluates to true, the colour picker is shown ok. It just doesn't output anything.)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 October 2024 17:50 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/11 "2024-10-07T17:50:47Z")

</div>

> [@hazymat](#):
>
> It doesn't send anything on the output

You should check the docs. Like the one above, color picker doesn't have an event `change`: [https://vuetifyjs.com/en/api/v-color-picker/](https://vuetifyjs.com/en/api/v-color-picker/)

Alternatively, bind the value to a data property and use a watch. Similar topic here: [Dashboard 2 - VUE \<v-color-picker\> - #2 by Steve-Mcl](https://discourse.nodered.org/t/dashboard-2-vue-v-color-picker/92188/2)

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [7 October 2024 17:56 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/12 "2024-10-07T17:56:45Z")

</div>

Thanks for the pointer. Got it working now. I thought I had read the docs but I was looking in the wrong place (was looking at [this](https://vuetifyjs.com/en/components/color-pickers/#usage) page). Cheers.

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [7 October 2024 18:29 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/13 "2024-10-07T18:29:11Z")

</div>

Another question.

I often find myself getting something wrong which seems to crash Dashboard 2.0. For example, I make some error in the syntax of a template node, and then when I switch tabs in my browser to see the result in dashboard and hit Ctrl-R to refresh, I get a "loading" image in the middle of the page:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/2/c269eb8557a91712d0e678ffb9208ded1ea7dcf1.png)

So then I'll go back to Node-RED and revert my changes then attempt to re-load, but I continue to get that loading image. Eventually I'll get this page display error in chrome: ""Error code: Out of Memory", at which point I can refresh the page and it loads again fine.

Is there some timeout I can change, or some way of forcing Dashboard 2.0 to restart somehow, to speed up this process?

Thanks

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 October 2024 19:24 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/14 "2024-10-07T19:24:57Z")

</div>

Generally it is the browser that is hung. The best thing is to close the tab, though even that may be difficult, and open a new one. At times I have had to close the whole browser.

---

<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:** [9 October 2024 12:07 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/15 "2024-10-09T12:07:47Z")

</div>

> [@hazymat](#):
>
> So then I'll go back to Node-RED and revert my changes then attempt to re-load, but I continue to get that loading image. Eventually I'll get this page display error in chrome: ""Error code: Out of Memory", at which point I can refresh the page and it loads again fine.

Yeah, normally this is an infinite loop or something like that in your template, where the browser just gets completely consumed by it/ It's not anything we can control from within Dashboard unfortunately.

The editor in Node-RED supporting Vue syntax highlighting and linting would be a major improvement, but this is not straight forward as @Steve-Mcl can detail.

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [9 October 2024 12:25 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/16 "2024-10-09T12:25:25Z")

</div>

> [@joepavitt](#):
>
> not anything we can control from within Dashboard unfortunately

Just checking we are talking about the same thing: Node-RED isn't crashing, Dashboard 1 works ok it's just the Dashboard 2.0 page that renders the "not responding", so I wondered if there was some way of resetting Dashboard 2.0.

I'll do what @Colin suggested as I hadn't thought about it being a browser hang. Will test.

---

<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:** [10 October 2024 06:31 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/17 "2024-10-10T06:31:09Z")

</div>

Yes, sorry, I was essentially agreeing with Colin.

I suspect its an error in the `ui-template` code, when the browser tries to render it (in Dashboard), it hangs.

---

<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:** [24 October 2024 06:31 UTC](https://discourse.nodered.org/t/sliders-color-pickers-dropdowns-etc-in-dashboard-2-0-templates/92196/18 "2024-10-24T06:31:23Z")

</div>

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