From 4f7e7156edea4142a622bbf0d600ba77d5a348bd Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Tue, 29 Apr 2025 21:52:10 +0200
Subject: [PATCH] Enhanced slider for game form

---
 .../Components/GameCreationForm.razor.css     |  2 +-
 .../Shared/Components/Slider/Slider.razor     | 15 +++++++------
 .../Shared/Components/Slider/Slider.razor.css | 21 ++++++++-----------
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
index f1fb03f..b512d37 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
@@ -69,7 +69,7 @@
 }
 
 .slider {
-    padding: 0 20px;
+    margin-right: 20px;
     align-content: center;
 }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor
index d4db8aa..59f2110 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor
@@ -1,11 +1,10 @@
 <div class="container">
-    <div class="slider-track"></div>
-    
-    <input type="range" id="min-range" style="@StatusColor(Value)" min="@Params.Min" max="@Params.Max"
-           @bind="@Value" @bind:event="oninput" @bind:after=HandleSlideOnInput />
+    <div class="input">
+        <div class="slider-track"></div>
 
-    <div class="values">
-        <span class="value">@Params.Min</span>
-        <span class="value">@Params.Max</span>
+        <input type="range" id="min-range" style="@StatusColor(Value)" min="@Params.Min" max="@Params.Max"
+               @bind="@Value" @bind:event="oninput" @bind:after=HandleSlideOnInput />
     </div>
-</div>
+
+    <span class="value">@Value</span>
+</div>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
index 09c613a..09a6339 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
@@ -1,7 +1,7 @@
-.container {
-    position: relative;
+.input {
     width: 100%;
-    z-index: 0
+    position: relative;
+    height: 2px;
 }
 
 input[type="range"] {
@@ -24,7 +24,6 @@ input[type="range"] {
     margin: auto;
     border-radius: 2px;
     background: var(--input-primary);
-    
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
@@ -75,15 +74,13 @@ input[type="range"]::-ms-thumb {
 }
 
 .values {
-    display: flex;
-    position: absolute;
-    margin-top: 2px;
-    width: 100%;
     font-weight: bold;
-    justify-content: space-between;
+    width: 1em;
 }
 
-.value {
-    width: 1em;
-    text-align:center;
+.container {
+    gap: 8px;
+    width: 100%;
+    display: flex;
+    align-items: center;
 }