diff --git a/components/ui_http_server/html/index.html b/components/ui_http_server/html/index.html index 65fc227..06e4c24 100644 --- a/components/ui_http_server/html/index.html +++ b/components/ui_http_server/html/index.html @@ -8,29 +8,106 @@ h1 {font-size: 2.9rem;} h2 {font-size: 2.1rem;} p {font-size: 1.9rem;} - body {max-width: 500px; margin:0px auto; padding-bottom: 30px;} - .slider { -webkit-appearance: none; margin: 14px; width: 400px; height: 15px; border-radius: 5px; background: #39a6de; outline: none; -webkit-transition: .2s; transition: opacity .2s;} - .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 12px; background: #f74d4d; cursor: pointer;} - .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 12px; background: #F74D4D; cursor: pointer; } + + .slider { + writing-mode: bt-lr; /* IE */ + -webkit-appearance: slider-vertical; /* Chromium */ + margin: 14px; + width: 15px; + height: 200px; + border-radius: 5px; + background: #39a6de; + outline: none; + -webkit-transition: .2s; + transition: opacity .2s; + } + .slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + border-radius: 12px; + background: #f74d4d; + cursor: pointer; + } + .slider::-moz-range-thumb { + width: 25px; + height: 25px; + border-radius: 12px; + background: #F74D4D; + cursor: pointer; + }
-50 %
-