diff --git a/src/client/Main.ts b/src/client/Main.ts
index 3b46e88b5..866d20ecf 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -155,6 +155,18 @@ class Client {
     });
 
     page();
+    function updateSliderProgress(slider) {
+      const percent =
+        ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
+      slider.style.setProperty("--progress", `${percent}%`);
+    }
+
+    document
+      .querySelectorAll("#bots-count, #private-lobby-bots-count")
+      .forEach((slider) => {
+        updateSliderProgress(slider);
+        slider.addEventListener("input", () => updateSliderProgress(slider));
+      });
   }
 
   private async handleJoinLobby(event: CustomEvent) {
diff --git a/src/client/styles.css b/src/client/styles.css
index bcad93ab8..a1ab7998a 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -240,15 +240,24 @@ label.option-card:hover {
 #private-lobby-bots-count {
   width: 80%;
   height: 16px;
+  appearance: none;
 }
 
 #bots-count::-webkit-slider-runnable-track,
 #private-lobby-bots-count::-webkit-slider-runnable-track {
-  background: #0075ff;
+  appearance: none;
+  background: linear-gradient(
+    to right,
+    #0075ff var(--progress, 0%),
+    white var(--progress, 0%)
+  );
   height: 8px;
 }
+
 #bots-count::-webkit-slider-thumb,
 #private-lobby-bots-count::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
   background: #0075ff;
   border-color: #0075ff;
   position: relative;