Hello!
I finally found a ui_template which displays sliders (at least vertically) on all my devices.
I got a little javascript embedded to display the current value below.
However when placing 2 sliders on one sheet the values are not displayed correctly or are even swapped (i.e Slider1 shows values of Slider2). All javascript variables and CSS ID, Classes should be unique.
Whats wrong with this code?
The basic HTML code:
<div style="text-align: center;">Slider</div>
<input ng-init="output(msg)" id="mySlider1" class="sliderV size2x6" type="range" min=0 max=100 step=1 ng-model="msg.payload" aria-label="volume" ng-change="output(msg)">
<p class="valtext1">Value: <span id="val1"></span></p>
<script>
(function($scope) {
$scope.output = function(key) {
if ($scope.hasOwnProperty("msg")){
if ($scope.msg.hasOwnProperty("socketid") || $scope.msg.payload !== 50){ //this prevents output at 50% from initialization on ng-change
$scope.send({payload:$scope.msg.payload, socketid:$scope.msg.socketid});
}
}
};
})(scope);
var slider = document.getElementById("mySlider1");
var output = document.getElementById("val1");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<style>
.valtext1 {
position: absolute;
bottom: 10px;
left: 30px;
font-size: large;
}
input[type='range'].sliderH {
margin-top: 60px;
width: 80px;
height: 240px;
padding: 0;
overflow: unset;
cursor: grab;
}
..
..
The complete flow with 2 sliders
[{"id":"e91da1ec.03c17","type":"ui_template","z":"c7d1f9d0.9ca2e","group":"597fee1d.655dc8","name":"Vertical Slider","order":1,"width":"3","height":"7","format":"<div style=\"text-align: center;\">Slider</div>\n<input ng-init=\"output(msg)\" id=\"mySlider1\" class=\"sliderV size2x6\" type=\"range\" min=0 max=100 step=1 ng-model=\"msg.payload\" aria-label=\"volume\" ng-change=\"output(msg)\">\n<p class=\"valtext1\">Value: <span id=\"val1\"></span></p>\n<script>\n(function($scope) {\n $scope.output = function(key) {\n if ($scope.hasOwnProperty(\"msg\")){\n if ($scope.msg.hasOwnProperty(\"socketid\") || $scope.msg.payload !== 50){ //this prevents output at 50% from initialization on ng-change\n\t\t $scope.send({payload:$scope.msg.payload, socketid:$scope.msg.socketid});\n }\n }\n \n };\n})(scope);\nvar slider = document.getElementById(\"mySlider1\");\nvar output = document.getElementById(\"val1\");\noutput.innerHTML = slider.value;\n\nslider.oninput = function() {\n output.innerHTML = this.value;\n}\n\n</script>\n\n<style>\n.valtext1 {\n position: absolute;\n bottom: 10px;\n left: 30px;\n font-size: large;\n}\ninput[type='range'].sliderH {\n margin-top: 60px;\n width: 80px;\n height: 240px;\n padding: 0;\n overflow: unset;\n cursor: grab;\n}\ninput[type='range'].sliderV {\n transform: rotateZ(-90deg);\n margin-top: 60px;\n writing-mode: bt-lr;\n width: 80%;\n padding: 0;\n overflow: unset;\n cursor: grab;\n height: 8px;\n margin-left: -100px;\n}\n.size1x6 {\n height: 8px !important;\n margin-left: -100px !important;\n}\n.size2x6 {\n height: 13px !important;\n margin-left: -80px !important;\n}\n.size1x6::-webkit-slider-thumb {\n height: 23px !important;\n width: 42px !important;\n}\n.size2x6::-webkit-slider-thumb{\n height: 43px !important;\n width: 72px !important;\n}\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n input[type='range'].sliderH {\n -webkit-appearance: none;\n width: 240px;\n height: 10px;\n margin-top: 30px;\n margin-left: 30px;\n outline: 0;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n }\n}\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n input[type='range'].sliderV {\n -webkit-appearance: none;\n -webkit-transform: rotate(270deg);\n width: 240px;\n height: 10px;\n margin-top: 140px;\n outline: 0;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n }\n}\ninput[type='range']::-ms-track {\n width: 10px;\n height: 240px;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n border: 0;\n}\ninput[type='range']::-moz-range-track {\n transform: rotateZ(-90deg);\n width: 10px;\n height: 240px;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n border: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n width: 72px;\n height: 32px;\n -webkit-appearance: none;\n background-image: -webkit-linear-gradient(left, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n box-shadow: 5px -10px 20px 0 #1a1a1a;\n}\ninput[type='range']::-ms-thumb {\n width: 22px;\n height: 52px;\n border: 0;\n box-shadow: -10px -5px 20px 0 #1a1a1a;\n background-image: -ms-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n}\ninput[type='range']::-ms-tooltip {\n display: none;\n}\ninput[type='range']::-moz-range-thumb {\n width: 32px;\n height: 72px;\n border: 0;\n box-shadow: -10px -5px 20px 0 #1a1a1a;\n background-image: -moz-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n border-radius: 0;\n transform: rotateZ(-90deg);\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":480,"y":60,"wires":[["af0e8fda.2e4658"]]},{"id":"af0e8fda.2e4658","type":"debug","z":"c7d1f9d0.9ca2e","name":"Vert","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":690,"y":60,"wires":[]},{"id":"1b27a4.3724705d","type":"debug","z":"c7d1f9d0.9ca2e","name":"Horz","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":690,"y":100,"wires":[]},{"id":"a1177f30.b6e02","type":"ui_template","z":"c7d1f9d0.9ca2e","group":"2a8087fa.909498","name":"Vertical Slider","order":1,"width":"3","height":"7","format":"<div style=\"text-align: center;\">Slider</div>\n<input ng-init=\"output(msg)\" id=\"mySlider2\" class=\"sliderV size2x6\" type=\"range\" min=0 max=100 step=1 ng-model=\"msg.payload\" aria-label=\"volume\" ng-change=\"output(msg)\">\n<p class=\"valtext2\">Value: <span id=\"val2\"></span></p>\n<script>\n(function($scope) {\n $scope.output = function(key) {\n if ($scope.hasOwnProperty(\"msg\")){\n if ($scope.msg.hasOwnProperty(\"socketid\") || $scope.msg.payload !== 50){ //this prevents output at 50% from initialization on ng-change\n\t\t $scope.send({payload:$scope.msg.payload, socketid:$scope.msg.socketid});\n }\n }\n \n };\n})(scope);\nvar slider = document.getElementById(\"mySlider2\");\nvar output = document.getElementById(\"val2\");\noutput.innerHTML = slider.value;\n\nslider.oninput = function() {\n output.innerHTML = this.value;\n}\n\n</script>\n\n<style>\n.valtext2 {\n position: absolute;\n bottom: 10px;\n left: 30px;\n font-size: large;\n}\ninput[type='range'].sliderH {\n margin-top: 60px;\n width: 80px;\n height: 240px;\n padding: 0;\n overflow: unset;\n cursor: grab;\n}\ninput[type='range'].sliderV {\n transform: rotateZ(-90deg);\n margin-top: 60px;\n writing-mode: bt-lr;\n width: 80%;\n padding: 0;\n overflow: unset;\n cursor: grab;\n height: 8px;\n margin-left: -100px;\n}\n.size1x6 {\n height: 8px !important;\n margin-left: -100px !important;\n}\n.size2x6 {\n height: 13px !important;\n margin-left: -80px !important;\n}\n.size1x6::-webkit-slider-thumb {\n height: 23px !important;\n width: 42px !important;\n}\n.size2x6::-webkit-slider-thumb{\n height: 43px !important;\n width: 72px !important;\n}\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n input[type='range'].sliderH {\n -webkit-appearance: none;\n width: 240px;\n height: 10px;\n margin-top: 30px;\n margin-left: 30px;\n outline: 0;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n }\n}\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n input[type='range'].sliderV {\n -webkit-appearance: none;\n -webkit-transform: rotate(270deg);\n width: 240px;\n height: 10px;\n margin-top: 140px;\n outline: 0;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n }\n}\ninput[type='range']::-ms-track {\n width: 10px;\n height: 240px;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n border: 0;\n}\ninput[type='range']::-moz-range-track {\n transform: rotateZ(-90deg);\n width: 10px;\n height: 240px;\n border-radius: 5px;\n background-color: #0b0b0b;\n box-shadow: inset 1px 1px 0 1px #6d6d6d;\n border: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n width: 72px;\n height: 32px;\n -webkit-appearance: none;\n background-image: -webkit-linear-gradient(left, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n box-shadow: 5px -10px 20px 0 #1a1a1a;\n}\ninput[type='range']::-ms-thumb {\n width: 22px;\n height: 52px;\n border: 0;\n box-shadow: -10px -5px 20px 0 #1a1a1a;\n background-image: -ms-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n}\ninput[type='range']::-ms-tooltip {\n display: none;\n}\ninput[type='range']::-moz-range-thumb {\n width: 32px;\n height: 72px;\n border: 0;\n box-shadow: -10px -5px 20px 0 #1a1a1a;\n background-image: -moz-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e);\n border-radius: 0;\n transform: rotateZ(-90deg);\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":480,"y":100,"wires":[["1b27a4.3724705d"]]},{"id":"597fee1d.655dc8","type":"ui_group","name":"V1","tab":"9cb34fc7.ab81b8","order":2,"disp":true,"width":"3","collapse":false},{"id":"2a8087fa.909498","type":"ui_group","name":"V2","tab":"9cb34fc7.ab81b8","order":3,"disp":true,"width":"3","collapse":false},{"id":"9cb34fc7.ab81b8","type":"ui_tab","name":"Slider Demo","icon":"dashboard","order":17,"disabled":false,"hidden":false}]
