# How to add slider on map sensor once on click it should do some action

**URL:** <https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700>\
**Category:** General\
**Created:** [7 March 2019 10:18 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700 "2019-03-07T10:18:14Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [7 March 2019 10:18 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/1 "2019-03-07T10:18:14Z")

</div>

In node-red I wanted to add slider on the dashboard world map, and once the user clicks on sensor mapped on world map it should show slider on tool tip.I wanted to control sensor based on that slider action is that possible?.

---

<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:** [7 March 2019 14:41 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/2 "2019-03-07T14:41:08Z")

</div>

In theory you can set the popup to contain any html you want so it should be possible to add such a control - but I haven't even thought about it so you will be blazing a trail here.

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [8 March 2019 13:24 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/3 "2019-03-08T13:24:54Z")

</div>

I have created a html table with button on popup, once user click on button how I can open another tab(I mean I want to open another view).

---

<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:** [8 March 2019 13:41 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/4 "2019-03-08T13:41:40Z")

</div>

what do you mean by tab / view ? inside the popup ? inside the worldmap ? in another web page ?  
so far it sounds like a standard javascript question.

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [8 March 2019 13:45 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/5 "2019-03-08T13:45:20Z")

</div>

I mean once the user clicks, it should open another tab which is hidden in dashboard.

---

<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:** [8 March 2019 14:28 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/6 "2019-03-08T14:28:03Z")

</div>

in our Node-RED-Dashboard ? You need to send a click back to the worldmap-in node that you then pass to a dashboard ui\_control node.

for example I set this in the payload for the marker - `Info:"<button onclick=\"console.log(ws); ws.send(JSON.stringify({'tab':1}));\">Click</button>",`

Then have this in the flow

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0950b1c8506bca9ab049c0ca570a03955ce43bc2.png)

[{"id":"62ae3b3c.8de704","type":"worldmap in","z":"f86be7c2.1183b8","name":"","path":"/worldmap","x":140,"y":620,"wires":[["2eadb3d5.d063ec","c47cdeab.f4911"]]},{"id":"292fba36.e8f4c6","type":"ui\_ui\_control","z":"f86be7c2.1183b8","name":"","x":480,"y":620,"wires":[]},{"id":"c47cdeab.f4911","type":"switch","z":"f86be7c2.1183b8","name":"","property":"payload.tab","propertyType":"msg","rules":[{"t":"nnull"}],"checkall":"true","repair":false,"outputs":1,"x":310,"y":620,"wires":[["292fba36.e8f4c6"]]}]

```auto
[{"id":"62ae3b3c.8de704","type":"worldmap in","z":"f86be7c2.1183b8","name":"","path":"/worldmap","x":140,"y":620,"wires":[["2eadb3d5.d063ec","c47cdeab.f4911"]]},{"id":"292fba36.e8f4c6","type":"ui_ui_control","z":"f86be7c2.1183b8","name":"","x":480,"y":620,"wires":[[]]},{"id":"c47cdeab.f4911","type":"switch","z":"f86be7c2.1183b8","name":"","property":"payload.tab","propertyType":"msg","rules":[{"t":"nnull"}],"checkall":"true","repair":false,"outputs":1,"x":310,"y":620,"wires":[["292fba36.e8f4c6"]]}]

```

and when I click the button in the popup it switches to tab 1

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [8 March 2019 14:51 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/7 "2019-03-08T14:51:08Z")

</div>

Thank you!! one doubt, how I can pass variables to another tab.

---

<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:** [8 March 2019 15:11 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/8 "2019-03-08T15:11:50Z")

</div>

you can't - the tabs are wired up in Node-RED - Node-RED passes messages to tabs - if you need to send different messages you need to use the message from the click to change your logic on the Node-RED side.

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [8 March 2019 16:30 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/9 "2019-03-08T16:30:13Z")

</div>

If I use flow variables then can i pass

---

<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:** [8 March 2019 16:48 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/10 "2019-03-08T16:48:11Z")

</div>

you can send whatever you like from the map back to the worldmap input node. What you do with it then is up to you - you can use it to switch a tab - or be the data - or whatever. just try it.

---

<div class="post-metadata">

**Author:** ![VIKRAMAS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikramas/32/3955_2.png) [@VIKRAMAS](https://discourse.nodered.org/u/VIKRAMAS)\
**Post date:** [16 March 2019 23:50 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/11 "2019-03-16T23:50:30Z")

</div>

To add slider I have added the below code but it is not sending event. The below javascript code will send once the slider action is stopped. World map is endpoint is /worldmap1  
`<input type=\"range\" id=\"range\"><\/input><script>function addEvent(el, name, func, bool) { if (el.addEventListener) el.addEventListener(name, func, bool); else if (el.attachEvent) el.attachEvent('on' + name, dunc); else el['on' + name] = func; } addEvent(range, 'change', function(e) { myFunction(e.target.value) }, false); function myFunction(a) { console.log(ws); ws.send(JSON.stringify({'tab':'light'})); }<\/script>`

---

<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:** [17 March 2019 14:45 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/12 "2019-03-17T14:45:22Z")

</div>

If I use a recent (1.5.31 or better) version of worldmap then I can use a marker like this

```auto
msg.payload = {
    name:"Light",
    icon:"fa-lightbulb-o",
    lat:51.15,
    lon:-1.45,
    popped:true,
    popup:'<input name="slide1" type="range" min="1" max="100" value="50" onchange=\'feedback(this.name,this.value)\' style="width:250px;">'
}
return msg;

```

And it will have a slider in the popup and the output will appear in the worldmap in node as an action like this  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/be9ebf21362044163c9a6de0c0c0ed6504cd4aa6.png)

---

<div class="post-metadata">

**Author:** ![renlefche](https://avatars.discourse-cdn.com/v4/letter/r/43a26b/32.png) [@renlefche](https://discourse.nodered.org/u/renlefche)\
**Post date:** [13 May 2020 15:15 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/13 "2020-05-13T15:15:19Z")

</div>

In your example you use a constant slider name "slide1" in the popup command line.

popup:'\<input name="slide1" type="range" min="1" max="100" value="50" onchange='feedback(this.name,this.value)' style="width:250px;"\>'

How can I use a variable to change the name? I used - name = {{variable for slide name}} - , but that didn't work...  
Thank you in advance.

---

<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:** [13 May 2020 16:14 UTC](https://discourse.nodered.org/t/how-to-add-slider-on-map-sensor-once-on-click-it-should-do-some-action/8700/14 "2020-05-13T16:14:59Z")

</div>

It's just javascript - so just concatenate the string as you would normally.

```auto
    popup:'<input name="' + your_variable + ''" type="range" .....

```