# Incorporate a slider into a button

**URL:** <https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782>\
**Category:** Dashboard\
**Created:** [17 December 2023 11:03 UTC](https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782 "2023-12-17T11:03:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [17 December 2023 11:03 UTC](https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782/1 "2023-12-17T11:03:10Z")

</div>

~~Thanks heaps - that did the trick.~~

Another query, is there a way to have a slider incorporated into a button?

Similar to this:

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

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [17 December 2023 15:50 UTC](https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782/2 "2023-12-17T15:50:07Z")

</div>

@Sirhc please post new questions in new forum topics!

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [18 December 2023 05:48 UTC](https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782/3 "2023-12-18T05:48:22Z")

</div>

Sorry - will do in future!

---

<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:** [18 December 2023 06:50 UTC](https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782/4 "2023-12-18T06:50:20Z")

</div>

It is not possible to put ready made dashboard widgets one inside another. Such components can be created with ui\_template. It takes some amount of understanding about HTML, CSS and JavaScript but it is certantly doable.

---

<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:** [20 December 2023 07:50 UTC](https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782/5 "2023-12-20T07:50:55Z")

</div>

Lifted heavy stuff but nothing about functionality...

```auto
[{"id":"413f14eab25193c9","type":"ui_template","z":"b44c35e46bc11d64","group":"800e999c070477fc","name":"button-icon-slider","order":5,"width":"2","height":"2","format":"<div id=\"{{'combined_'+$id}}\" class=\"combined\" style=\"--val:0;\" ng-init=\"init()\">\n <button class=\"md-raised md-button md-ink-ripple md-clickable\" md-ink-ripple=\"#03A9F4\">\n <i class=\"fa fa-lightbulb-o fa-2x\"></i> \n <div class=\"md-ripple-container\" style=\"\"></div>\n </button>\n <input type=\"range\" ng-model=\"sliderval\" min=\"0\" max=\"100\" /> \n</div>\n\n<script>\n (function(scope) { \n scope.init = function(){\n if($(\"#combined_\"+scope.$id.length)){\n actuallyInit()\n }\n else{\n setTimeout(function(){\n actuallyInit()\n },40)\n }\n }\n function actuallyInit(){ \n scope.inited = true\n }\n\n scope.$watch('sliderval', function(v) {\n document.getElementById('combined_'+scope.$id).style.setProperty('--val', v);\n })\n\n scope.$watch('msg', function(msg) {\n if (msg) { \n console.log(msg)\n }\n }); \n\n})(scope);\n</script>\n\n<style>\n .combined{\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n }\n \n .combined button{\n position:absolute;\n inset:0;\n }\n\n .combined input{\n --min: 0;\n --max:100;\n --slider:#ff4500;\n position: absolute; \n bottom: 0.5em;\n width: 90%;\n -webkit-appearance: none; \n height: 6px;\n background: rgba(255, 255, 255, 0.6);\n border-radius: 5px;\n background-image: linear-gradient(var(--slider), var(--slider));\n background-size: calc((var(--val) - var(--min)) * 100 / (var(--max) - var(--min)) * 1%) 100%;\n background-repeat: no-repeat;\n }\n\n .combined input:hover {\n opacity: 1;\n }\n \n .combined input::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 1em;\n height: 1em;\n border-radius: 50%;\n background: var(--nr-dashboard-widgetTextColor);\n cursor: pointer;\n }\n \n .combined input::-moz-range-thumb {\n width: 1em;\n height: 1em;\n border-radius: 50%;\n background: var(--nr-dashboard-widgetTextColor);\n cursor: pointer;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":870,"y":1080,"wires":[[]]},{"id":"800e999c070477fc","type":"ui_group","name":"Default","tab":"b88a2918fbef2936","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"b88a2918fbef2936","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

Merry Christmas 🎉

---

<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:** [19 January 2024 07:51 UTC](https://discourse.nodered.org/t/incorporate-a-slider-into-a-button/83782/6 "2024-01-19T07:51:25Z")

</div>

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