Slider UI change (#2148)

## Description:

1. adds feature so when making single player server, bots amount can be
determined by slider and manual
1-1.
[video](https://github.com/user-attachments/assets/23186592-2330-478b-8f73-313ca073803b)

## Please complete the following:

- [X] I have added screenshots for all UI updates
- [X] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [X] I have added relevant tests to the test directory
- [X] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

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

jack_45183

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>

src/client/SinglePlayerModal.ts

@@ -20,6 +20,7 @@ import { generateID } from "../core/Util";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
 import "./components/Difficulties";
+import "./components/FluentSlider";
 import "./components/Maps";
 import { fetchCosmetics } from "./Cosmetics";
 import { FlagInput } from "./FlagInput";
@@ -44,7 +45,6 @@ export class SinglePlayerModal extends LitElement {
   @state() private useRandomMap: boolean = false;
   @state() private gameMode: GameMode = GameMode.FFA;
   @state() private teamCount: TeamCountConfig = 2;
-
   @state() private disabledUnits: UnitType[] = [];
 
   private userSettings: UserSettings = new UserSettings();
@@ -220,24 +220,16 @@ export class SinglePlayerModal extends LitElement {
             </div>
             <div class="option-cards">
               <label for="bots-count" class="option-card">
-                <input
-                  type="range"
-                  id="bots-count"
-                  min="0"
-                  max="400"
-                  step="1"
+                <!-- Slider -->
+                <fluent-slider
+                  .value=${this.bots}
+                  .min=${0}
+                  .max=${400}
+                  .step=${1}
+                  ariaLabel=${translateText("single_modal.bots")}
                   @input=${this.handleBotsChange}
-                  @change=${this.handleBotsChange}
-                  .value="${String(this.bots)}"
-                />
-                <div class="option-card-title">
-                  <span>${translateText("single_modal.bots")}</span>${this
-                    .bots === 0
-                    ? translateText("single_modal.bots_disabled")
-                    : this.bots}
-                </div>
+                ></fluent-slider>
               </label>
-
               <label
                 for="singleplayer-modal-disable-npcs"
                 class="option-card ${this.disableNPCs ? "selected" : ""}"
@@ -372,10 +364,11 @@ export class SinglePlayerModal extends LitElement {
   }
 
   private handleBotsChange(e: Event) {
-    const value = parseInt((e.target as HTMLInputElement).value);
-    if (isNaN(value) || value < 0 || value > 400) {
-      return;
-    }
+    const inputEl = e.target as HTMLInputElement;
+    let value = inputEl.valueAsNumber;
+    if (Number.isNaN(value)) return;
+    if (value < 0) value = 0;
+    if (value > 400) value = 400;
     this.bots = value;
   }