Theme range input & use transforms

src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts

@@ -28,7 +28,7 @@ function getPrescision(value: string): number {
 
 class RangeInputElement extends HTMLElement {
   private _input: HTMLInputElement;
-  private _valueDisplay?: HTMLDivElement;
+  private _valueDisplay?: HTMLSpanElement;
   private _ignoreChange = false;
 
   static get observedAttributes() {
@@ -66,13 +66,13 @@ class RangeInputElement extends HTMLElement {
     this.innerHTML =
       `<div class="${style.thumbWrapper}">` +
       `<div class="${style.thumb}"></div>` +
-      `<div class="${style.valueDisplay}"></div>` +
+      `<div class="${style.valueDisplay}"><svg width="32" height="62"><path d="M27.3 27.3C25 29.6 17 35.8 17 43v3c0 3 2.5 5 3.2 5.8a6 6 0 1 1-8.5 0C12.6 51 15 49 15 46v-3c0-7.2-8-13.4-10.3-15.7A16 16 0 0 1 16 0a16 16 0 0 1 11.3 27.3z"/></svg><span></span></div>` +
       '</div>';
 
     this.insertBefore(this._input, this.firstChild);
     this._valueDisplay = this.querySelector(
-      '.' + style.valueDisplay,
+      '.' + style.valueDisplay + ' > span',
-    ) as HTMLDivElement;
+    ) as HTMLSpanElement;
     // Set inline styles (this is useful when used with frameworks which might clear inline styles)
     this._update();
   }

src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css

@@ -23,10 +23,8 @@ range-input::before {
   width: 100%;
   height: 2px;
   border-radius: 1px;
-  box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.3),
+  background: linear-gradient(var(--main-theme-color), var(--main-theme-color))
-    inset 0 0.5px 0 rgba(255, 255, 255, 0.2), 0 0.5px 0 rgba(255, 255, 255, 0.3);
+    0 / var(--value-percent, 0%) 100% no-repeat var(--medium-light-gray);
-  background: linear-gradient(#34b9eb, #218ab1) 0 / var(--value-percent, 0%)
-    100% no-repeat #eee;
 }
 
 .input {
@@ -41,14 +39,12 @@ range-input::before {
   pointer-events: none;
   position: absolute;
   bottom: 3px;
-  left: var(--value-percent, 0%);
+  left: 0;
   margin-left: -6px;
-  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="1" fill="%235D509E" /></svg>')
+  background: var(--main-theme-color);
-    center no-repeat #34b9eb;
   border-radius: 50%;
   width: 12px;
   height: 12px;
-  box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.3);
 }
 
 .thumb-wrapper {
@@ -58,21 +54,19 @@ range-input::before {
   bottom: 0;
   height: 0;
   overflow: visible;
+  transform: translate(var(--value-percent, 0%), 0);
 }
 
 .value-display {
-  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="62" fill="none"><path fill="%2334B9EB" d="M27.3 27.3C25 29.6 17 35.8 17 43v3c0 3 2.5 5 3.2 5.8a6 6 0 1 1-8.5 0C12.6 51 15 49 15 46v-3c0-7.2-8-13.4-10.3-15.7A16 16 0 0 1 16 0a16 16 0 0 1 11.3 27.3z"/><circle cx="16" cy="56" r="1" fill="%235D509E"/></svg>')
-    top center no-repeat;
   position: absolute;
   box-sizing: border-box;
-  left: var(--value-percent, 0%);
+  left: 0;
   bottom: 3px;
   width: 32px;
   height: 62px;
   text-align: center;
   padding: 8px 3px 0;
   margin: 0 0 0 -16px;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
   transform-origin: 50% 90%;
   opacity: 0.0001;
   transform: scale(0.2);
@@ -86,6 +80,19 @@ range-input::before {
   will-change: transform;
   pointer-events: none;
   overflow: hidden;
+
+  > svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    fill: var(--main-theme-color);
+  }
+
+  > span {
+    position: relative;
+  }
 }
 
 .touch-active + .thumb-wrapper .value-display {

src/client/lazy-app/Compress/Options/style.css

@@ -7,7 +7,7 @@
 }
 
 .options-title {
-  background-color: var(--header-color);
+  background-color: var(--main-theme-color);
   color: var(--header-text-color);
   margin: 0;
   padding: 10px var(--horizontal-padding);

src/client/lazy-app/Compress/style.css

@@ -40,7 +40,7 @@
 }
 
 .options-1-theme {
-  --header-color: var(--pink);
+  --main-theme-color: var(--pink);
   --header-text-color: var(--white);
   --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
 
@@ -50,7 +50,7 @@
 }
 
 .options-2-theme {
-  --header-color: var(--blue);
+  --main-theme-color: var(--blue);
   --header-text-color: var(--dark-text);
   --scroller-radius: var(--options-radius) var(--options-radius) 0 0;
 

src/shared/prerendered-app/colors.css

@@ -9,6 +9,7 @@ html {
   --deep-blue: #09f;
   --light-blue: #76c8ff;
   --light-gray: #eaeaea;
+  --medium-light-gray: #d1d1d1;
   --dark-gray: #333;
   --dim-text: #343a3e;
   --dark-text: #142630;