# Operation of a slider
**URL:** https://discourse.nodered.org/t/operation-of-a-slider/79857
**Category:** General
**Created:** [15 July 2023 23:55 UTC](https://discourse.nodered.org/t/operation-of-a-slider/79857 "2023-07-15T23:55:52Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Surfb](https://discourse.nodered.org/u/Surfb)
#### Post date: [15 July 2023 23:55 UTC](https://discourse.nodered.org/t/operation-of-a-slider/79857/1 "2023-07-15T23:55:52Z")
I have 4 injections, 2 for the X axis and the other 2 for the Y axis; I want that when the "up" is pressed it adds 1 and when the "down" is pressed it subtracts 1, thus with a maximum value of 100, the same for "left" and "right"
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [16 July 2023 01:07 UTC](https://discourse.nodered.org/t/operation-of-a-slider/79857/2 "2023-07-16T01:07:50Z")
What are you expecting the output to be -
- An array: msg.payload = [21, 42]
- An object: msg.payload = {"horizontal": 21, "vertical": 42}
- Context variables: flow.horizontal = 21, flow.vertical = 42
etc ?
---
### Author:  [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [16 July 2023 04:46 UTC](https://discourse.nodered.org/t/operation-of-a-slider/79857/3 "2023-07-16T04:46:05Z")
Here's an example of a simple flow for a virtual slider using flow variables.
```auto
[{"id":"df1913c70995b382","type":"tab","label":"Virtual slider","disabled":false,"info":"","env":[]},{"id":"c9e3bef5d9c8cd19","type":"group","z":"df1913c70995b382","name":"","style":{"fill":"#e3f3d3","label":true},"nodes":["d15a1813899dd1be","744b8ba38cdb2563","d8ae3e7b8ad646bc"],"x":634,"y":179,"w":212,"h":222},{"id":"e1a9a82fc3802606","type":"inject","z":"df1913c70995b382","name":"Up","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"up","payload":"1","payloadType":"num","x":230,"y":240,"wires":[["295b3758258aa7e4"]]},{"id":"c0d1db6c2f1a5173","type":"inject","z":"df1913c70995b382","name":"Down","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"down","payload":"1","payloadType":"num","x":230,"y":280,"wires":[["295b3758258aa7e4"]]},{"id":"e56d04675fbe2140","type":"inject","z":"df1913c70995b382","name":"Left","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"left","payload":"1","payloadType":"num","x":230,"y":360,"wires":[["295b3758258aa7e4"]]},{"id":"3d95145401c4f376","type":"inject","z":"df1913c70995b382","name":"Right","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"right","payload":"1","payloadType":"num","x":230,"y":400,"wires":[["295b3758258aa7e4"]]},{"id":"6bf6ebd0d5cb1a04","type":"inject","z":"df1913c70995b382","name":"Reset","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"reset","payload":"1","payloadType":"num","x":230,"y":180,"wires":[["295b3758258aa7e4"]]},{"id":"295b3758258aa7e4","type":"function","z":"df1913c70995b382","name":"Example using flow variables","func":"// Change these values according to your needs\nif (msg.topic == \"reset\") {\n flow.set(\"x\", 0); // Set initial X value (might want 50 ?)\n flow.set(\"y\", 0); // Set initial Y value (might want 50 ?)\n}\n\nlet X = flow.get(\"x\") || 0;\n\nif (msg.topic == \"up\") {\n if (X <100) {\n X = X + 1;\n flow.set(\"x\",X);\n }\n}\nelse if (msg.topic == \"down\") {\n if (X > 0) {\n X = X -1;\n flow.set(\"x\", X)\n }\n}\n\n// I'm assuming \"right\" will increment the slider and \"left\" will decrement it\n\nlet Y = flow.get(\"y\") || 0;\n\nif (msg.topic == \"right\") {\n if (Y < 100) {\n Y = Y + 1;\n flow.set(\"y\", Y);\n }\n}\nelse if (msg.topic == \"left\") {\n if (Y > 0) {\n Y = Y - 1;\n flow.set(\"y\", Y)\n }\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":320,"wires":[["d15a1813899dd1be","744b8ba38cdb2563"]]},{"id":"d15a1813899dd1be","type":"function","z":"df1913c70995b382","g":"c9e3bef5d9c8cd19","name":"Show value of X","func":"let X = flow.get(\"x\") || 0;\n\nnode.status({ text: \"X = \" + X });\n\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":280,"wires":[[]]},{"id":"744b8ba38cdb2563","type":"function","z":"df1913c70995b382","g":"c9e3bef5d9c8cd19","name":"Show value of Y","func":"let Y = flow.get(\"y\") || 0;\n\nnode.status({ text: \"Y = \" + Y });\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":360,"wires":[[]]},{"id":"d8ae3e7b8ad646bc","type":"comment","z":"df1913c70995b382","g":"c9e3bef5d9c8cd19","name":"Debug","info":"","x":710,"y":220,"wires":[]}]
```
You can also see the X and Y values in the Context Data tab (top-right of Node-RED's main window).
Notes:
1. I have a Reset inject node that is fired when the flow is started to set initial values for X and Y.
2. I have assumed the X and Y sliders each start at 0 (can be changed in the Function node).
3. Each 'Inject' node has a topic-name that is used within the 'Function' node.
4. I have assumed 'Right' will increment Y and 'Left' will decrement (change in Function node).
This is one example. I'm sure other examples will be posted here by some of the forum members.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [14 September 2023 04:46 UTC](https://discourse.nodered.org/t/operation-of-a-slider/79857/4 "2023-09-14T04:46:26Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.