fix zoom multiplier

index.html

@@ -17,9 +17,10 @@
     <section id="camera">
         <video id="stream" muted autoplay playsinline data-lens="none"></video>
        <div class="range-container">
-        <input type="range" name="range" id="range">
+        <input type="range" name="range" id="range" aria-label="Zoom Level">
         <img src="./assets/trackMeter.svg" alt="zoom feature">
-        <p class="zoom-multiplier"></p>
+        <img class="slider" src="./assets/line.svg" alt="zoom slider">
+        <p class="zoom-multiplier" aria-live="polite"></p>
        </div>
         <div class="switch-camera-video-photo-mode" role="button" tabindex="0">
             <input type="radio" id="photo-mode" name="modes" value="photo-mode" checked />

js/stream.mjs

@@ -45,6 +45,7 @@ export const streamWebCamVideo = (isFrontCamera = true) => {
 
       input.oninput = function (event) {
         track.applyConstraints({ advanced: [{ zoom: event.target.value }] });
+        document.querySelector(".slider").style.left = "-60px"
       }
       input.hidden = false;
       document.querySelector(".range-container").style.visibility = "visible"

style.css

@@ -218,9 +218,13 @@ video.flip {
     color: #fff;
     font-size: 10px;
     translate: 0 18px;
+    pointer-events: none;
 }
 .range-container img{
     position: absolute;
-    opacity: 0.6;
+    opacity: 0.9;
     pointer-events: none;
+}
+.range-container .slider{
+    position: absolute;
 }