# Ui\_slider tooltip dynamically adjustable?

**URL:** <https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716>\
**Category:** Dashboard\
**Created:** [4 September 2024 21:22 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716 "2024-09-04T21:22:31Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [4 September 2024 21:22 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/1 "2024-09-04T21:22:31Z")

</div>

I wonder how the 'tooltip' of a ui\_slider can be dynamically adjusted to the current value of the slider?

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [6 September 2024 15:01 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/2 "2024-09-06T15:01:51Z")

</div>

Any idea here?  
Need to have the actual position/value shown with 'tooltip', not with an extra text field item.

Thanks for help on this 👍

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [6 September 2024 18:03 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/3 "2024-09-06T18:03:54Z")

</div>

I can't help much (I don't use DB)  
But this bump and the correct assignment to the category of `Dashboard` may bring in the correct response.

( I have moved it to `Dashboard`)

---

<div class="post-metadata">

**Author:** ![Xenon](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xenon/32/48893_2.png) [@Xenon](https://discourse.nodered.org/u/Xenon)\
**Post date:** [7 September 2024 17:05 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/4 "2024-09-07T17:05:32Z")

</div>

Hi, are you asking for DB1 or DB2?  
In case of DB2 you can quicly check the dyamic value from the doc: [Slider ui-slider | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-slider.html)

Hope this helps,  
Giulio

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [10 September 2024 21:15 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/5 "2024-09-10T21:15:21Z")

</div>

It's on DB1..

I need some time to migrate to DB2 ... but should complete some parts of the project first.  
Thanks for your help!

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 September 2024 21:28 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/6 "2024-09-10T21:28:01Z")

</div>

Not exactly what you are asking for but if you set the slider to output only on release, it shows the current value in a bubble above the slider handle.

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

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [10 September 2024 21:44 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/7 "2024-09-10T21:44:44Z")

</div>

Yes, that's known. But afais when you send a msg.payload to get a new position, I think it doesn't show the 'new' current value. For that, it would be good to have the 'tooltip' with the cursor.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 September 2024 21:59 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/8 "2024-09-10T21:59:53Z")

</div>

Do you mean sending msg.payload to the input of the slider?

On my dashboard the slider position and displayed value change to match when I inject a number.

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [10 September 2024 22:42 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/9 "2024-09-10T22:42:25Z")

</div>

Basically I would like to have the actual position of the slider shown. I thought using the tooltip is good enough.  
But the behavior seems to be a bit strange:  
-- if you send msg.payload == the new value can be shown as a 'sort of tooltip'  
under the slider line, you position the pointer to the slider bubble and get the value below the line.  
For that you enter {{msg.payload}} in the tooltip dialog  
-- with changing the slider position you get the (normal) tooltip above the slider line but the other tooltip stays with the previous msg.payload

![Screenshot_2024-09-11_00-40-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e87686cae14b4fe6d5fb678ec7d1b15b6cd98825.png)  
A little hard to explain to a normal user!?

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [11 September 2024 10:30 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/10 "2024-09-11T10:30:09Z")

</div>

> [@gNeandr](#):
>
> For that you enter {{msg.payload}} in the tooltip dialog  
> -- with changing the slider position you get the (normal) tooltip above the slider line but the other tooltip stays with the previous msg.payload

It will not change the tooltip as the payload from the slider move is not feed back into the slider.  
You can feed the payload output back into the slider, but disable passthrough message and bypass the slider for input.  
Or  
Add a filter node to stop a passthrough feed back infinity loop.  
e.g.

```auto
[{"id":"af3daf95ddf08a9a","type":"ui_button","z":"d1395164b4eec73e","name":"","group":"2d4fe667.28f8ba","order":1,"width":0,"height":0,"passthru":false,"label":"50","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"50","payloadType":"num","topic":"topic","topicType":"msg","x":170,"y":2760,"wires":[["0f196069e8eb93d6"]]},{"id":"0f196069e8eb93d6","type":"junction","z":"d1395164b4eec73e","x":260,"y":2780,"wires":[["08906a71cbcb368b"]]},{"id":"76b12c59e612597b","type":"ui_button","z":"d1395164b4eec73e","name":"","group":"2d4fe667.28f8ba","order":2,"width":0,"height":0,"passthru":false,"label":"80","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"80","payloadType":"num","topic":"topic","topicType":"msg","x":170,"y":2820,"wires":[["0f196069e8eb93d6"]]},{"id":"8f2c5c351cb99eec","type":"rbe","z":"d1395164b4eec73e","name":"","func":"rbe","gap":"","start":"","inout":"out","septopics":false,"property":"payload","topi":"topic","x":510,"y":2780,"wires":[["01c7def420330777","0f196069e8eb93d6"]]},{"id":"08906a71cbcb368b","type":"ui_slider","z":"d1395164b4eec73e","name":"","label":"slider","tooltip":"{{msg.payload}}","group":"2d4fe667.28f8ba","order":3,"width":0,"height":0,"passthru":true,"outs":"end","topic":"topic","topicType":"msg","min":0,"max":"100","step":"10","className":"","x":350,"y":2780,"wires":[["8f2c5c351cb99eec"]]},{"id":"01c7def420330777","type":"debug","z":"d1395164b4eec73e","name":"debug 2567","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":2780,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"Demo","tab":"0ca01f1e15e69b4d","order":2,"disp":true,"width":"18","collapse":false,"className":""},{"id":"0ca01f1e15e69b4d","type":"ui_tab","name":"demo","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [11 September 2024 18:11 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/11 "2024-09-11T18:11:40Z")

</div>

Thanks for that important details. And yes feed back sounds a good point. I will try it in the next day.

---

<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:** [10 December 2024 18:12 UTC](https://discourse.nodered.org/t/ui-slider-tooltip-dynamically-adjustable/90716/12 "2024-12-10T18:12:08Z")

</div>

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