Slick looking Vertical slider

This UI template snippet adds a vertical slider that looks like a real console fader based on code from Hiroshishu. Should work well in Chrome and Firefox in either a UI size of 1x6 or 2x6

[{"id":"e91da1ec.03c17","type":"ui_template","z":"c248eb9.2257c18","group":"","name":"Vertical Slider","order":4,"width":2,"height":6,"format":"<div style=\"text-align: center;\">Slider</div>\n<input ng-init=\"output(msg)\" class=\"sliderV size2x6\" type=\"range\" min=0 max=100 step=1 ng-model=\"msg.payload\" aria-label=\"volume\" ng-change=\"output(msg)\">\n\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);\n</script>\n\n<style>\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: 32px;\n  height: 72px;\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,"templateScope":"local","x":1237,"y":433,"wires":[[]]}]

Flow Info

Created 5 years ago
Rating: 4.8 5

Owner

Actions

Rate:

Node Types

Other
  • ui_template (x1)

Tags

  • vertical
  • slider
  • fader
  • volume
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option