# Vertical Slider

**URL:** <https://discourse.nodered.org/t/vertical-slider/9271>\
**Category:** Dashboard\
**Created:** [21 March 2019 11:12 UTC](https://discourse.nodered.org/t/vertical-slider/9271 "2019-03-21T11:12:47Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![lex\_news](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@lex\_news](https://discourse.nodered.org/u/lex_news)\
**Post date:** [21 March 2019 11:12 UTC](https://discourse.nodered.org/t/vertical-slider/9271/1 "2019-03-21T11:12:47Z")

</div>

Is it possible to place slider vertically? I need it to manage position of my window shutter.

---

<div class="post-metadata">

**Author:** ![JayDickson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaydickson/32/90592_2.png) [@JayDickson](https://discourse.nodered.org/u/JayDickson)\
**Post date:** [21 March 2019 12:43 UTC](https://discourse.nodered.org/t/vertical-slider/9271/2 "2019-03-21T12:43:29Z")

</div>

Not the most intuitive way to set it, but yes.

 ![40%20AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/4c63c74a89308f6539a59f944369eb13ecb37e09.png)

---

<div class="post-metadata">

**Author:** ![lex\_news](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@lex\_news](https://discourse.nodered.org/u/lex_news)\
**Post date:** [21 March 2019 13:16 UTC](https://discourse.nodered.org/t/vertical-slider/9271/3 "2019-03-21T13:16:02Z")

</div>

ThanX a lot! That is exactly what I need.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 March 2019 15:13 UTC](https://discourse.nodered.org/t/vertical-slider/9271/4 "2019-03-21T15:13:02Z")

</div>

hmm - there was me thinking a tall thin shape would be an obvious thing to try... ah well..  
Will add some extra words to the info.

---

<div class="post-metadata">

**Author:** ![JayDickson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaydickson/32/90592_2.png) [@JayDickson](https://discourse.nodered.org/u/JayDickson)\
**Post date:** [21 March 2019 15:15 UTC](https://discourse.nodered.org/t/vertical-slider/9271/5 "2019-03-21T15:15:06Z")

</div>

> [@dceejay](#):
>
> hmm - there was me thinking a tall thin shape would be an obvious thing to try... ah well..  
> Will add some extra words to the info.

I mean it is, but most people are so conditioned to crap like toggles and checkboxes that they don't experiment. Perhaps I should restate it as "too intuitive to feel true."

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 March 2019 15:25 UTC](https://discourse.nodered.org/t/vertical-slider/9271/6 "2019-03-21T15:25:51Z")

</div>

Should just work if height \> width

---

<div class="post-metadata">

**Author:** ![lex\_news](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@lex\_news](https://discourse.nodered.org/u/lex_news)\
**Post date:** [21 March 2019 15:34 UTC](https://discourse.nodered.org/t/vertical-slider/9271/7 "2019-03-21T15:34:31Z")

</div>

I came from openhab2. In their ui there is a checkbox for vertical slider. So you are right, it's too intuitive to try 🙂

And also checkbox for reverse (if you want to have 100 on top and 0 on bottom). Any ideas is it possible to reverse?

---

<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:** [21 March 2019 15:36 UTC](https://discourse.nodered.org/t/vertical-slider/9271/8 "2019-03-21T15:36:29Z")

</div>

I had same dilemma in my mind for that Level widget I do currently. Checkbox vs height \<\> width. Hopefully it will be sorted out here? 🤔

---

<div class="post-metadata">

**Author:** ![lex\_news](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@lex\_news](https://discourse.nodered.org/u/lex_news)\
**Post date:** [21 March 2019 15:40 UTC](https://discourse.nodered.org/t/vertical-slider/9271/9 "2019-03-21T15:40:27Z")

</div>

Both ways are good if it's described in doc.  
It will be obvious in case of click and drag inside UI for size change of the widget 🙂

---

<div class="post-metadata">

**Author:** ![JayDickson](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jaydickson/32/90592_2.png) [@JayDickson](https://discourse.nodered.org/u/JayDickson)\
**Post date:** [21 March 2019 15:58 UTC](https://discourse.nodered.org/t/vertical-slider/9271/10 "2019-03-21T15:58:56Z")

</div>

> [@lex\_news](#):
>
> Any ideas is it possible to reverse?

`[{"id":"810908dd.170e68","type":"ui_slider","z":"121977d4.01633","name":"","label":"slider","group":"ab06e35b.bb1a4","order":0,"width":"1","height":"5","passthru":true,"topic":"","min":"0","max":"100","step":1,"x":530,"y":360,"wires":[["bd7add2c.6a4ea8"]]},{"id":"4faf9efa.76f8e","type":"debug","z":"121977d4.01633","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":890,"y":360,"wires":[]},{"id":"bd7add2c.6a4ea8","type":"function","z":"121977d4.01633","name":"slider inverter","func":"var input = msg.payload;\nmsg.payload = 100-input;\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":360,"wires":[["4faf9efa.76f8e"]]},{"id":"ab06e35b.bb1a4","type":"ui_group","z":"","name":"Default","tab":"6da9dc66.596744","disp":true,"width":"6","collapse":false},{"id":"6da9dc66.596744","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]`

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 March 2019 16:02 UTC](https://discourse.nodered.org/t/vertical-slider/9271/11 "2019-03-21T16:02:05Z")

</div>

Updated version in master branch (github not npm)  
`npm i node-red/node-red-dashboard`  
With more text in info and ability to be automatically reversed by setting min \> max.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [20 August 2019 20:56 UTC](https://discourse.nodered.org/t/vertical-slider/9271/12 "2019-08-20T20:56:09Z")

</div>

For those interested, I made an alternative vertical slider with a console fader look.  
[https://flows.nodered.org/flow/4b2ebe373bcac34e6b18be998bb47f93](https://flows.nodered.org/flow/4b2ebe373bcac34e6b18be998bb47f93)

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [8 January 2020 18:21 UTC](https://discourse.nodered.org/t/vertical-slider/9271/13 "2020-01-08T18:21:44Z")

</div>

Hi again!  
I added a neat flow to automate the vertical console faders position and specify the fading time, might be useful for dashboards controlling volume or lighting intensity for example.

[https://flows.nodered.org/flow/faf911189f9bbdfe0525ebaf77cae16e](https://flows.nodered.org/flow/faf911189f9bbdfe0525ebaf77cae16e)