Incorporate a slider into a button

Dashboard
1

Thanks heaps - that did the trick.

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

Similar to this:

image

2

@Sirhc please post new questions in new forum topics!

3

Sorry - will do in future!

4

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.

5

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 :tada:

2 Likes
6

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