Thanks heaps - that did the trick.
Another query, is there a way to have a slider incorporated into a button?
Similar to this:
@Sirhc please post new questions in new forum topics!
Sorry - will do in future!
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.
Lifted heavy stuff but nothing about functionality...
[{"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 
2 Likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
