# Slide to confirm button

**URL:** <https://discourse.nodered.org/t/slide-to-confirm-button/67658>\
**Category:** Dashboard\
**Created:** [13 September 2022 14:22 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658 "2022-09-13T14:22:02Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![PaulKana](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulkana/32/37106_2.png) [@PaulKana](https://discourse.nodered.org/u/PaulKana)\
**Post date:** [13 September 2022 14:22 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/1 "2022-09-13T14:22:03Z")

</div>

Hi, I', looking to create a touch interface that has reset buttons. I'd like to use slide to confirm ie:  
 ![example](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4c423a4a055a69757c1d53bf559b1ef6aca2b592.gif)

There is quite a lot of those here for example, but I don't really know how to integrate..

> **[Slide-to-confirm | npm.io](https://npm.io/search/keyword:slide-to-confirm)**
>
> ngx-slide-confirm, react-native-slide-to-confirm, ngx-slide-to-confirm, rn-slide-button, rn-slide-to-confirm

Has anybody already done that?  
I guess I could make a slider with only two values and set it back to 0 with a delay, but looking for some other opinions?

Thanks

---

<div class="post-metadata">

**Author:** ![PaulKana](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulkana/32/37106_2.png) [@PaulKana](https://discourse.nodered.org/u/PaulKana)\
**Post date:** [14 September 2022 06:52 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/2 "2022-09-14T06:52:13Z")

</div>

For the moment I have created a logic that works with the original slider node + modified css a bit:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/b/db94b3de4fa439c3c9e85d654f6ca37f9faa398b.png)

```auto
[{"id":"e19847deb1e85087","type":"ui_chart","z":"452ab868.195118","name":"","group":"da746eb3a7a1ff66","order":0,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"bezier","nodata":"","dot":false,"ymin":"0","ymax":"","removeOlder":"12","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#fff76b","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":550,"y":280,"wires":[[]]},{"id":"cbe79e1ca18d6cc0","type":"ui_slider","z":"452ab868.195118","name":"","label":"","tooltip":"","group":"da746eb3a7a1ff66","order":1,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","min":"0","max":"10","step":"0.1","x":130,"y":240,"wires":[["3c96b8d2203f7a25","7aaa14f2a1ec7808"]]},{"id":"8d54589ffedf0878","type":"change","z":"452ab868.195118","name":"set 0","rules":[{"t":"set","p":"payload","pt":"msg","to":"0","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":130,"y":200,"wires":[["cbe79e1ca18d6cc0"]]},{"id":"3c96b8d2203f7a25","type":"delay","z":"452ab868.195118","name":"delay","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":270,"y":240,"wires":[["8d54589ffedf0878"]]},{"id":"7aaa14f2a1ec7808","type":"switch","z":"452ab868.195118","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"10","vt":"num"},{"t":"lt","v":"10","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":270,"y":280,"wires":[["4e12b2467f6ba1e4"],[]],"outputLabels":["10","null"]},{"id":"4e12b2467f6ba1e4","type":"change","z":"452ab868.195118","name":"10 > []","rules":[{"t":"change","p":"payload","pt":"msg","from":"10","fromt":"num","to":"[]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":280,"wires":[["e19847deb1e85087"]]},{"id":"da746eb3a7a1ff66","type":"ui_group","name":"A","tab":"6e7f9da.d28aee4","order":1,"disp":true,"width":"8","collapse":true},{"id":"6e7f9da.d28aee4","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

![swipe_to_reset2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/efa8d34b1f66147e5caa893c7c4109e9f87173c4.gif)

**The problem**  
The whole track is touch/click sensitive, not only the touch target. So accidental reset can still happen, as no sliding/swiping movement is necessary.

---

<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:** [14 September 2022 07:05 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/3 "2022-09-14T07:05:10Z")

</div>

Maybe need a sequence of tests eg \>=3 and \<=5, then 6 and 8. And then 10

---

<div class="post-metadata">

**Author:** ![PaulKana](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulkana/32/37106_2.png) [@PaulKana](https://discourse.nodered.org/u/PaulKana)\
**Post date:** [14 September 2022 07:11 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/4 "2022-09-14T07:11:34Z")

</div>

Hi, thank you for the suggestion!  
Right now the switch node is configured to discard (send to empty junction) all results that are under 10.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/f/6ff62ea4a0174175a4ecfebb969c238b55b56efb.png)

It seems that the behavior of the slider stays the same if I add the additional tests.

---

<div class="post-metadata">

**Author:** ![PaulKana](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulkana/32/37106_2.png) [@PaulKana](https://discourse.nodered.org/u/PaulKana)\
**Post date:** [14 September 2022 07:14 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/5 "2022-09-14T07:14:04Z")

</div>

Also the slider has 100 steps for smoothness, if I only gave it two values it would snap to max after 51% of sliding.

---

<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:** [14 September 2022 14:16 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/6 "2022-09-14T14:16:24Z")

</div>

It is very hard to get such thing working smoothly.  
I did something but it is not reliable. Many times the slider just does not like to be dragged, it loses the focus and the state is unknown.  
I have no more time to play with it. But you may try ..

```auto
[
    {
        "id": "bdc44b29.79d388",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "confirm slider based on md-slider",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "<div class=\"confirm-slider-container\" >\n \n <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n<div class=\"confirm-slider-label\">Slide to confirm</div>\n</div>\n<style>\n.confirm-slider-container{\n position:relative;\n}\n.confirm-slider-label{\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n text-align: center;\n line-height: 29px;\n pointer-events: none;\n\n}\n.confirm-slider-container > md-slider{\n height:40px;\n margin-left: 8px;\n margin-right: 8px;\n top:0px;\n pointer-events:none;\n}\n.confirm-slider-container > md-slider .md-track-container {\n width: 100%;\n position: absolute;\n top: 0px;\n height: 32px; \n}\n.confirm-slider-container > md-slider .md-track.md-track{\n border-radius:32px; \n background: gray;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill{\n position:relative;\n background:green;\n border-radius:32px;\n pointer-events:all;\n min-width:40px;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill:after{\n position:absolute;\n content:'➪';\n top:4px;\n right:10px;\n\n}\n.confirm-slider-container > md-slider .md-thumb:after {\n visibility:hidden; \n}\n.confirm-slider-container > md-slider .md-focus-ring{\n visibility:hidden !important;\n}\n.confirm-slider-container > md-slider .md-thumb {\n transform: scale(1) !important;\n background:transparent;\n pointer-events: all;\n}\n</style>\n\n<script>\n(function(scope) {\n\n let isDown = false\n scope.slidervalue = 0.1\n\n scope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) { \n if(slidervalue < 0.1){\n scope.slidervalue = 0.1\n }\n }\n })\n scope.down = function(){\n if(isDown){\n return\n }\n\n isDown = true\n scope.send({payload:'moving',topic:'confirm-slider'})\n document.addEventListener('mouseup', scope.up);\n }\n\n scope.up = function(){ \n document.removeEventListener('mouseup', scope.up); \n if(scope.slidervalue >= .9){ \n scope.send({payload:'confirm',topic:'confirm-slider'}) \n scope.slidervalue = 1\n }\n else{\n scope.send({payload:'try again',topic:'confirm-slider'})\n scope.slidervalue = 0.1\n } \n isDown = false \n }\n \n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.topic=='confirm-slider'){//ignore internal messages\n return\n } \n scope.slidervalue = 0.1\n }\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 610,
        "wires": [
            [
                "b2c4f7a71c209c35",
                "30bfa6e3bb0d3110"
            ]
        ]
    },
    {
        "id": "b2c4f7a71c209c35",
        "type": "ui_text",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "status",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 600,
        "y": 610,
        "wires": []
    },
    {
        "id": "30bfa6e3bb0d3110",
        "type": "switch",
        "z": "98fb9802851faeed",
        "name": "if confirm",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "confirm",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 240,
        "y": 710,
        "wires": [
            [
                "d9fd9d3359222623"
            ]
        ]
    },
    {
        "id": "1df23dbb63e2937c",
        "type": "trigger",
        "z": "98fb9802851faeed",
        "name": "reset 2s",
        "op1": "",
        "op2": "reset",
        "op1type": "nul",
        "op2type": "str",
        "duration": "2",
        "extend": true,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 560,
        "y": 710,
        "wires": [
            [
                "bdc44b29.79d388"
            ]
        ]
    },
    {
        "id": "d9fd9d3359222623",
        "type": "change",
        "z": "98fb9802851faeed",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 400,
        "y": 710,
        "wires": [
            [
                "1df23dbb63e2937c"
            ]
        ]
    },
    {
        "id": "20ae1040.3cf58",
        "type": "ui_group",
        "name": "Slider",
        "tab": "6b520bda.e997a4",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6b520bda.e997a4",
        "type": "ui_tab",
        "name": "Testing",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

EDIT: Made it a bit bigger and added a label to maybe indicate behavior.

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

---

<div class="post-metadata">

**Author:** ![PaulKana](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulkana/32/37106_2.png) [@PaulKana](https://discourse.nodered.org/u/PaulKana)\
**Post date:** [14 September 2022 14:50 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/7 "2022-09-14T14:50:23Z")

</div>

Ok, aitäh!  
On safari 15.6.1 macos it works as it should, on safari ios not really. My target machine is MS Surface + Chrome, but I haven't aquired it yet so can't test yet.

---

<div class="post-metadata">

**Author:** ![PaulKana](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulkana/32/37106_2.png) [@PaulKana](https://discourse.nodered.org/u/PaulKana)\
**Post date:** [15 September 2022 13:01 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/8 "2022-09-15T13:01:23Z")

</div>

Nice!  
It seems that it did have some hiccups while I was modifying it, but now it seems to be stable. Nice that I can put many on the same page.

I did modify the CSS a bit to hide the "Slide to confirm" text behind the green curtain (the slider label is now behind everything, but the slider track background is almost transparent, so it shows through)

```auto
[{"id":"751182213762fbb9","type":"ui_template","z":"56b086a7341ea71f","group":"20ae1040.3cf58","name":"confirm slider based on md-slider","order":1,"width":"6","height":"1","format":"<div class=\"confirm-slider-container\" >\n \n <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n <div class=\"confirm-slider-label\">Slide to confirm</div>\n</div>\n<style>\n.confirm-slider-container{\n position:relative;\n}\n.confirm-slider-label{\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n text-align: center;\n line-height: 29px;\n pointer-events: none;\n z-index:0;\n\n}\n.confirm-slider-container > md-slider{\n height:40px;\n margin-left: 8px;\n margin-right: 8px;\n top:0px;\n pointer-events:none;\n z-index:1;\n}\n.confirm-slider-container > md-slider .md-track-container {\n width: 100%;\n position: absolute;\n top: 0px;\n height: 32px; \n}\n.confirm-slider-container > md-slider .md-track.md-track{\n border-radius:32px; \n background: rgba(12 12 12 .2);\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill{\n position:relative;\n background:green;\n border-radius:32px;\n pointer-events:all;\n min-width:40px;\n}\n.confirm-slider-container > md-slider .md-track.md-track-fill:after{\n position:absolute;\n content:'➡︎';\n font-size:20px;\n top:5px;\n right:10px;\n\n}\n.confirm-slider-container > md-slider .md-thumb:after {\n visibility:hidden; \n}\n.confirm-slider-container > md-slider .md-focus-ring{\n visibility:hidden !important;\n}\n.confirm-slider-container > md-slider .md-thumb {\n transform: scale(1) !important;\n background:transparent;\n pointer-events: all;\n \n}\n</style>\n\n<script>\n(function(scope) {\n\n let isDown = false\n scope.slidervalue = 0.1\n\n scope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) { \n if(slidervalue < 0.1){\n scope.slidervalue = 0.1\n }\n }\n })\n scope.down = function(){\n if(isDown){\n return\n }\n\n isDown = true\n scope.send({payload:'moving',topic:'confirm-slider'})\n document.addEventListener('mouseup', scope.up);\n }\n\n scope.up = function(){ \n document.removeEventListener('mouseup', scope.up); \n if(scope.slidervalue >= .99){ \n scope.send({payload:'confirm',topic:'confirm-slider'}) \n scope.slidervalue = 1\n }\n else{\n scope.send({payload:'try again',topic:'confirm-slider'})\n scope.slidervalue = 0.1\n } \n isDown = false \n }\n \n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.topic=='confirm-slider'){//ignore internal messages\n return\n } \n scope.slidervalue = 0.1\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":260,"y":720,"wires":[["b2eca3d6531783de","02147c29040fd6df"]]},{"id":"b2eca3d6531783de","type":"ui_text","z":"56b086a7341ea71f","group":"20ae1040.3cf58","order":3,"width":0,"height":0,"name":"","label":"status","format":"{{msg.payload}}","layout":"row-spread","x":530,"y":720,"wires":[]},{"id":"02147c29040fd6df","type":"switch","z":"56b086a7341ea71f","name":"if confirm","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"confirm","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":170,"y":820,"wires":[["944e3df19515e711"]]},{"id":"4f617b24a045bb07","type":"trigger","z":"56b086a7341ea71f","name":"reset 2s","op1":"","op2":"reset","op1type":"nul","op2type":"str","duration":"2","extend":true,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":490,"y":820,"wires":[["751182213762fbb9"]]},{"id":"944e3df19515e711","type":"change","z":"56b086a7341ea71f","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"reset","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":330,"y":820,"wires":[["4f617b24a045bb07"]]},{"id":"20ae1040.3cf58","type":"ui_group","name":"Slider","tab":"6b520bda.e997a4","order":1,"disp":true,"width":"6","collapse":false},{"id":"6b520bda.e997a4","type":"ui_tab","name":"Testing","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<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:** [15 September 2022 14:25 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/9 "2022-09-15T14:25:02Z")

</div>

If you are using more than one, it is reasonable to move the styles out to separated template. Otherwise you are declaring same styles all over and over. Well, the last one wins of course but if you ever need to change something, it takes to change it for all of them. And if you make some mistakes, it is too hard to find.

Example with two and separated CSS and a small bonus 😉

```auto
[
    {
        "id": "bdc44b29.79d388",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "confirm slider based on md-slider",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "<div class=\"confirm-slider-container\" >\n <div class=\"confirm-slider-label\">Slide to confirm</div>\n <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" data-conent=\"OK\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n</div>\n\n<script>\n(function(scope) {\n let isDown = false\n scope.slidervalue = 0.01 \n scope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) { \n if(slidervalue < 0.1){\n scope.slidervalue = 0.1\n }\n let c = scope.slidervalue >= 1 ? '✓' : '➪'\n $(\"#slider_\"+scope.$id).find('.md-track-fill').attr('data-content',c);\n }\n })\n scope.down = function(){\n if(isDown){\n return\n }\n\n isDown = true\n scope.send({payload:'moving',topic:'confirm-slider'})\n document.addEventListener('mouseup', scope.up);\n }\n\n scope.up = function(){ \n document.removeEventListener('mouseup', scope.up); \n if(scope.slidervalue >= .9){ \n scope.send({payload:'confirm',topic:'confirm-slider'}) \n scope.slidervalue = 1;\n \n \n }\n else{\n scope.send({payload:'try again',topic:'confirm-slider'})\n scope.slidervalue = 0.1\n \n } \n isDown = false \n }\n \n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.topic=='confirm-slider'){//ignore internal messages\n return\n } \n scope.slidervalue = 0.1\n }\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 610,
        "wires": [
            [
                "b2c4f7a71c209c35",
                "30bfa6e3bb0d3110"
            ]
        ]
    },
    {
        "id": "b2c4f7a71c209c35",
        "type": "ui_text",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "status",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 600,
        "y": 610,
        "wires": []
    },
    {
        "id": "30bfa6e3bb0d3110",
        "type": "switch",
        "z": "98fb9802851faeed",
        "name": "if confirm",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "confirm",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 260,
        "y": 700,
        "wires": [
            [
                "d9fd9d3359222623"
            ]
        ]
    },
    {
        "id": "1df23dbb63e2937c",
        "type": "trigger",
        "z": "98fb9802851faeed",
        "name": "reset 2s",
        "op1": "",
        "op2": "reset",
        "op1type": "nul",
        "op2type": "str",
        "duration": "2",
        "extend": true,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 580,
        "y": 700,
        "wires": [
            [
                "bdc44b29.79d388"
            ]
        ]
    },
    {
        "id": "d9fd9d3359222623",
        "type": "change",
        "z": "98fb9802851faeed",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 420,
        "y": 700,
        "wires": [
            [
                "1df23dbb63e2937c"
            ]
        ]
    },
    {
        "id": "4490bd001d2c33ee",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "confirm-slider CSS",
        "order": 9,
        "width": 0,
        "height": 0,
        "format": "<style>\n .confirm-slider-container {\n position: relative;\n }\n\n .confirm-slider-label {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n text-align: center;\n line-height: 29px;\n pointer-events: none;\n z-index: 0;\n\n }\n\n .confirm-slider-container>md-slider {\n height: 40px;\n margin-left: 8px;\n margin-right: 8px;\n top: 0px;\n pointer-events: none;\n z-index: 1;\n }\n\n .confirm-slider-container>md-slider .md-track-container {\n width: 100%;\n position: absolute;\n top: 0px;\n height: 32px;\n }\n\n .confirm-slider-container>md-slider .md-track.md-track {\n border-radius: 32px;\n background: rgba(12 12 12 .2);\n }\n\n .confirm-slider-container>md-slider .md-track.md-track-fill {\n position: relative;\n background: green;\n border-radius: 32px;\n pointer-events: all;\n min-width: 40px;\n }\n\n .confirm-slider-container>md-slider .md-track.md-track-fill:after {\n position: absolute;\n content: attr(data-content);\n font-size: 20px;\n top: 2px;\n right: 10px;\n\n }\n\n .confirm-slider-container>md-slider .md-thumb:after {\n visibility: hidden;\n }\n\n .confirm-slider-container>md-slider .md-focus-ring {\n visibility: hidden !important;\n }\n\n .confirm-slider-container>md-slider .md-thumb {\n transform: scale(1) !important;\n background: transparent;\n pointer-events: all;\n\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 280,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "83a24a1d30e1135e",
        "type": "ui_template",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "name": "confirm slider based on md-slider",
        "order": 1,
        "width": "6",
        "height": "1",
        "format": "<div class=\"confirm-slider-container\" >\n <div class=\"confirm-slider-label\">Slide to right to confirm</div>\n <md-slider id=\"{{'slider_'+$id}}\" ng-mousedown=\"down()\" data-conent=\"OK\" ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" value=\"0.1\" aria-label=\"confirm-slider\"></md-slider>\n</div>\n\n<script>\n(function(scope) {\n let isDown = false\n scope.slidervalue = 0.01 \n scope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) { \n if(slidervalue < 0.1){\n scope.slidervalue = 0.1\n }\n let c = scope.slidervalue >= 1 ? '✓' : '➪'\n $(\"#slider_\"+scope.$id).find('.md-track-fill').attr('data-content',c);\n }\n })\n scope.down = function(){\n if(isDown){\n return\n }\n\n isDown = true\n scope.send({payload:'moving',topic:'confirm-slider'})\n document.addEventListener('mouseup', scope.up);\n }\n\n scope.up = function(){ \n document.removeEventListener('mouseup', scope.up); \n if(scope.slidervalue >= .9){ \n scope.send({payload:'confirm',topic:'confirm-slider'}) \n scope.slidervalue = 1;\n \n \n }\n else{\n scope.send({payload:'try again',topic:'confirm-slider'})\n scope.slidervalue = 0.1\n \n } \n isDown = false \n }\n \n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.topic=='confirm-slider'){//ignore internal messages\n return\n } \n scope.slidervalue = 0.1\n }\n });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 740,
        "wires": [
            [
                "99ac61604c06bc59",
                "e7d804325b4d0c00"
            ]
        ]
    },
    {
        "id": "99ac61604c06bc59",
        "type": "ui_text",
        "z": "98fb9802851faeed",
        "group": "20ae1040.3cf58",
        "order": 3,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "status",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 600,
        "y": 740,
        "wires": []
    },
    {
        "id": "e7d804325b4d0c00",
        "type": "switch",
        "z": "98fb9802851faeed",
        "name": "if confirm",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "confirm",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 260,
        "y": 830,
        "wires": [
            [
                "1db7ed42401c5184"
            ]
        ]
    },
    {
        "id": "a920f5344520a12e",
        "type": "trigger",
        "z": "98fb9802851faeed",
        "name": "reset 2s",
        "op1": "",
        "op2": "reset",
        "op1type": "nul",
        "op2type": "str",
        "duration": "2",
        "extend": true,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 580,
        "y": 830,
        "wires": [
            [
                "83a24a1d30e1135e"
            ]
        ]
    },
    {
        "id": "1db7ed42401c5184",
        "type": "change",
        "z": "98fb9802851faeed",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "reset",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 420,
        "y": 830,
        "wires": [
            [
                "a920f5344520a12e"
            ]
        ]
    },
    {
        "id": "20ae1040.3cf58",
        "type": "ui_group",
        "name": "Slider",
        "tab": "6b520bda.e997a4",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "6b520bda.e997a4",
        "type": "ui_tab",
        "name": "Testing",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![PaulKana](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulkana/32/37106_2.png) [@PaulKana](https://discourse.nodered.org/u/PaulKana)\
**Post date:** [15 September 2022 15:00 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/10 "2022-09-15T15:00:48Z")

</div>

Aitäh! Good idea for the separate css, didn't think of it allthough I already have one to avoid selecting text by accident:

```auto
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
touch-action: none;
}

```

For some reason the checkmarks don't show in safari macos nor firefox / chrome on windows!

---

<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:** [15 September 2022 15:02 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/11 "2022-09-15T15:02:13Z")

</div>

> [@PaulKana](#):
>
> checkmarks don't show in safari

You may try some other characters or maybe "OK" or something then. I don't have any I device to try ..

---

<div class="post-metadata">

**Author:** ![PaulKana](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paulkana/32/37106_2.png) [@PaulKana](https://discourse.nodered.org/u/PaulKana)\
**Post date:** [16 September 2022 06:59 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/12 "2022-09-16T06:59:08Z")

</div>

It was all in your explanation! As I kept my original modified node on the same layout it's css overrode the new css 😬

---

<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:** [16 September 2022 07:00 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/13 "2022-09-16T07:00:30Z")

</div>

Lesson learned 😃

---

<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:** [30 September 2022 07:00 UTC](https://discourse.nodered.org/t/slide-to-confirm-button/67658/14 "2022-09-30T07:00:57Z")

</div>

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