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/HostLobbyModal.ts

@@ -311,26 +311,17 @@ export class HostLobbyModal extends LitElement {
               ${translateText("host_modal.options_title")}
             </div>
             <div class="option-cards">
-              <label for="bots-count" class="option-card">
-                <input
-                  type="range"
-                  id="bots-count"
-                  min="0"
-                  max="400"
-                  step="1"
-                  @input=${this.handleBotsChange}
-                  @change=${this.handleBotsChange}
-                  .value="${String(this.bots)}"
-                />
-                <div class="option-card-title">
-                  <span>${translateText("host_modal.bots")}</span>${
-                    this.bots === 0
-                      ? translateText("host_modal.bots_disabled")
-                      : this.bots
-                  }
-                </div>
-              </label>
-
+                <label for="bots-count" class="option-card">
+                <!-- Slider -->
+                  <fluent-slider
+                    .value=${this.bots}
+                    .min=${0}
+                    .max=${400}
+                    .step=${1}
+                    ariaLabel=${translateText("single_modal.bots")}
+                    @input=${this.handleBotsChange}
+                  ></fluent-slider>
+                </label>
                 <label
                   for="disable-npcs"
                   class="option-card ${this.disableNPCs ? "selected" : ""}"