Only color the left part of the range track

Makes it easier to envision the value is selected.
novnc · Jan 13, 2025 · f857823 · f857823
1 parent 35bbda8
commit f857823
Showing 1 changed file with 40 additions and 2 deletions.
diff --git a/app/styles/input.css b/app/styles/input.css
@@ -409,6 +409,9 @@ input[type=range] {
     height: 20px;
     padding: 0;
     background: transparent;
+    /* Hides the big box shadow of -webkit-slider-thumb
+       that sticks out to the left. */
+    overflow: hidden;
 }
 input[type=range]:hover {
     cursor: grab;
@@ -422,15 +425,19 @@ input[type=range]:disabled {
 /* -webkit-slider.. & -moz-range.. cant be in selector lists:
    https://bugs.chromium.org/p/chromium/issues/detail?id=1154623 */
 input[type=range]::-webkit-slider-runnable-track {
-    background-color: var(--novnc-blue);
+    background-color: var(--novnc-lightgrey);
     height: 3px;
     border-radius: 3px;
 }
 input[type=range]::-moz-range-track {
-    background-color: var(--novnc-blue);
+    background-color: var(--novnc-lightgrey);
     height: 3px;
     border-radius: 3px;
 }
+input[type=range]::-moz-range-progress {
+    background-color: var(--novnc-blue);
+    border-radius: 3px;
+}
 input[type=range]::-webkit-slider-thumb {
     appearance: none;
     width: 19px;
@@ -442,6 +449,37 @@ input[type=range]::-webkit-slider-thumb {
     -webkit-tap-highlight-color: transparent;
     border: var(--border-width) solid dimgray;
     margin-top: -8px;
+
+    /* Since there is no way to style the left part of the range track in
+       webkit, we add a large shadow to the left of the thumb and then crop it
+       with a clip-path polygon shaped like this:
+
+                  1--------2
+                 /   ___   |
+        7--------8 /     \ |
+        | progress |Thumb| |
+        6--------5 \ ___ / |
+                 \         |
+                  4--------3
+       Note the tilt between 1 - 8 and 4 - 5 which is needed to hide the edge of
+       the shadow.
+    */
+    /* FIXME: We can remove the box shadow workaround when this is standardized:
+              https://github.com/w3c/csswg-drafts/issues/4410 */
+
+    box-shadow: calc(-100vw - 19px) 0 0 100vw var(--novnc-blue);
+    --track-top: 8px;
+    --track-bottom: 11px;
+    clip-path: polygon(
+        2px 0%,                     /* 1 */
+        100% 0%,                    /* 2 */
+        100% 100%,                  /* 3 */
+        2px 100%,                   /* 4 */
+        0% var(--track-bottom),     /* 5 */
+        -100vw var(--track-bottom), /* 6 */
+        -100vw var(--track-top),    /* 7 */
+        0% var(--track-top)         /* 8 */
+    );
 }
 input[type=range]::-moz-range-thumb {
     appearance: none;