Range fix (#362)

## 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

@@ -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) {

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;