Slick looking Vertical slider

README.md

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

<style> input[type='range'].sliderH { margin-top: 60px; width: 80px; height: 240px; padding: 0; overflow: unset; cursor: grab; } input[type='range'].sliderV { transform: rotateZ(-90deg); margin-top: 60px; margin-bottom: 120px; writing-mode: bt-lr; width: 80%; padding: 0; overflow: unset; cursor: grab; height: 8px; margin-left: -100px; } .size1x6 { height: 8px !important; margin-left: -100px !important; } .size2x6 { height: 13px !important; margin-left: -80px !important; } .size1x6::-webkit-slider-thumb { height: 23px !important; width: 42px !important; } .size2x6::-webkit-slider-thumb{ height: 43px !important; width: 72px !important; } @media screen and (-webkit-min-device-pixel-ratio: 0) { input[type='range'].sliderH { -webkit-appearance: none; width: 240px; height: 10px; margin-top: 30px; margin-left: 30px; outline: 0; border-radius: 5px; background-color: #0b0b0b; box-shadow: inset 1px 1px 0 1px #6d6d6d; } } @media screen and (-webkit-min-device-pixel-ratio: 0) { input[type='range'].sliderV { -webkit-appearance: none; -webkit-transform: rotate(270deg); width: 240px; height: 10px; margin-top: 140px; outline: 0; border-radius: 5px; background-color: #0b0b0b; box-shadow: inset 1px 1px 0 1px #6d6d6d; } } input[type='range']::-ms-track { width: 10px; height: 240px; border-radius: 5px; background-color: #0b0b0b; box-shadow: inset 1px 1px 0 1px #6d6d6d; border: 0; } input[type='range']::-moz-range-track { transform: rotateZ(-90deg); width: 10px; height: 240px; border-radius: 5px; background-color: #0b0b0b; box-shadow: inset 1px 1px 0 1px #6d6d6d; border: 0; } input[type='range']::-webkit-slider-thumb { width: 72px; height: 32px; -webkit-appearance: none; background-image: -webkit-linear-gradient(left, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e); box-shadow: 5px -10px 20px 0 #1a1a1a; } input[type='range']::-ms-thumb { width: 32px; height: 72px; border: 0; box-shadow: -10px -5px 20px 0 #1a1a1a; background-image: -ms-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e); } input[type='range']::-ms-tooltip { display: none; } input[type='range']::-moz-range-thumb { width: 32px; height: 72px; border: 0; box-shadow: -10px -5px 20px 0 #1a1a1a; background-image: -moz-linear-gradient(bottom, #0f0f0f, #2e2e2e 4%, #0f0f0f 8%, #000 47%, #808080 48%, #808080 52%, #000 53%, #1a1a1a 96%, #2e2e2e); border-radius: 0; transform: rotateZ(-90deg); } </style>

flow.json

[
    {
        "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": [
            []
        ]
    }
]

Very nice slider!
I would really like to use also a horizontal version?
How can I change this beautiful design?