From b20a10564b30dd5f8f48898c3e2e224658ee5043 Mon Sep 17 00:00:00 2001
From: Mittanicz <49088589+Mittanicz@users.noreply.github.com>
Date: Fri, 28 Mar 2025 22:40:12 +0100
Subject: [PATCH] Range fix (#362)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Diessel
![Snímek obrazovky 2025-03-28 v 10 28
49](https://github.com/user-attachments/assets/f514484a-7a2f-443c-b42b-39a0d4694673)
![Snímek obrazovky 2025-03-28 v 10 29
09](https://github.com/user-attachments/assets/f7514d84-b9ca-4d9b-bca5-f6ad587d3793)
---
 src/client/Main.ts    | 12 ++++++++++++
 src/client/styles.css | 11 ++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

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;