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;
 }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor

@@ -1,11 +1,10 @@
 <div class="container">
+    <div class="input">
         <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>
 
-    <div class="values">
+    <span class="value">@Value</span>
-        <span class="value">@Params.Min</span>
-        <span class="value">@Params.Max</span>
-    </div>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css

@@ -1,7 +1,7 @@
-.container {
+.input {
-    position: relative;
     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 {
+.container {
-    width: 1em;
+    gap: 8px;
-    text-align:center;
+    width: 100%;
+    display: flex;
+    align-items: center;
 }