src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor

@@ -47,8 +47,7 @@
 
     <div class="slider-container">
         <SliderRange Params="SliderRangeParams"
-                     @bind-Max="Value.MaxInterest" @bind-Max:after="HandleValueChanged"
+                     @bind-Value="Value.Interest" @bind-Value:after="HandleValueChanged" />
-                     @bind-Min="Value.MinInterest" @bind-Min:after="HandleValueChanged" />
     </div>
 </div>
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs

@@ -12,8 +12,7 @@ public class GameFilterParams
     public List<TagDto>? Tags { get; set; }
     public List<PublisherDto>? Publishers { get; set; }
     public List<DeveloperDto>? Developers { get; set; }
-    public int MinInterest { get; set; } = 1;
+    public MinMaxDto Interest { get; set; } = new() { Min = 1, Max = 5 };
-    public int MaxInterest { get; set; } = 5;
     public List<int>? ReleaseYears { get; set; }
     public List<int>? StorageSpaceIds { get; set; }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs

@@ -43,8 +43,8 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway
             {
                 CurrentPage = currentPage,
                 Title = filterParams.Title,
-                MaxInterest = filterParams.MaxInterest,
+                MaxInterest = filterParams.Interest.Max,
-                MinInterest = filterParams.MinInterest,
+                MinInterest = filterParams.Interest.Min,
                 StorageSpaces = filterParams.StorageSpaceIds,
                 DeveloperIds = filterParams.Developers?.Select(d => d.Id ?? 0).ToList(),
                 PublisherIds = filterParams.Publishers?.Select(d => d.Id ?? 0).ToList(),

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs

@@ -1,4 +1,5 @@
 using GameIdeas.BlazorApp.Shared.Constants;
+using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Search;
@@ -21,7 +22,7 @@ public partial class SearchInput
         Text = string.Empty;
         Timer = new()
         {
-            Interval = 500,
+            Interval = GlobalConstants.DELAY_INPUT_MS,
             AutoReset = false,
         };
 

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

@@ -1,13 +1,13 @@
 <div class="container">
     <div class="slider-track" style="@FillColor()"></div>
     
-    <input type="range" id="min-range" style="@StatusColor(Min)" min="@Params.Min" max="@Params.Max" 
+    <input type="range" id="min-range" style="@StatusColor(Value.Min)" min="@Params.Min" max="@Params.Max"
-        @bind="@Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
+           @bind="@Value.Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
-    <input type="range" id="max-range" style="@StatusColor(Max)" min="@Params.Min" max="@Params.Max" 
+    <input type="range" id="max-range" style="@StatusColor(Value.Max)" min="@Params.Min" max="@Params.Max"
-        @bind="@Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
+           @bind="@Value.Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
 
     <div class="values">
-        <span class="value">@Min</span>
+        <span class="value">@Value.Min</span>
-        <span class="value">@Max</span>
+        <span class="value">@Value.Max</span>
     </div>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs

@@ -1,44 +1,58 @@
+using GameIdeas.Shared.Constants;
+using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
-using System.Threading.Tasks;
-
 namespace GameIdeas.BlazorApp.Shared.Components.SliderRange;
 
 public partial class SliderRange
 {
     [Parameter] public SliderRangeParams Params { get; set; } = new();
-    [Parameter] public int Max { get; set; }
+    [Parameter] public MinMaxDto Value { get; set; } = new() { Min = 1, Max = 5 };
-    [Parameter] public EventCallback<int> MaxChanged { get; set; }
+    [Parameter] public EventCallback<MinMaxDto> ValueChanged { get; set; }
-    [Parameter] public int Min { get; set; }
-    [Parameter] public EventCallback<int> MinChanged { get; set; }
 
-    private async Task HandleSlideTwoInput()
+    private System.Timers.Timer? Timer;
+
+    protected override void OnInitialized()
     {
-        if (Max - Min <= Params.Gap)
+        Timer = new()
         {
-            Min = Max - Params.Gap;
+            Interval = GlobalConstants.DELAY_INPUT_MS,
+            AutoReset = false,
+        };
+
+        Timer.Elapsed += async (_, _) => await ValueChanged.InvokeAsync(Value);
+        base.OnInitialized();
     }
 
-        await MaxChanged.InvokeAsync(Max);
+    private void HandleSlideTwoInput()
+    {
+        if (Value.Max - Value.Min <= Params.Gap)
+        {
+            Value.Min = Value.Max - Params.Gap;
         }
 
-    private async Task HandleSlideOnInput()
+        Timer?.Stop();
-    {
+        Timer?.Start();
-        if (Max - Min <= Params.Gap)
-        {
-            Max = Min + Params.Gap;
     }
 
-        await MinChanged.InvokeAsync(Min);
+    private void HandleSlideOnInput()
+    {
+        if (Value.Max - Value.Min <= Params.Gap)
+        {
+            Value.Max = Value.Min + Params.Gap;
+        }
+
+        Timer?.Stop();
+        Timer?.Start();
     }
 
     private string FillColor()
     {
-        var percent1 = (double)(Min - Params.Min) / (Params.Max - Params.Min) * 100;
+        var percent1 = (double?)(Value.Min - Params.Min) / (Params.Max - Params.Min) * 100;
-        var percent2 = (double)(Max - Params.Min) / (Params.Max - Params.Min) * 100;
+        var percent2 = (double?)(Value.Max - Params.Min) / (Params.Max - Params.Min) * 100;
         return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)";
     }
 
-    private string StatusColor(int value)
+    private string StatusColor(int? value)
     {
         string str = "--thumb-color: var({0});";
 

src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs

@@ -20,5 +20,6 @@ public class GlobalConstants
 
     public const int API_PORT = 8000;
     public const string SUB_DOMAIN_NAME = "api-";
-}
 
+    public const double DELAY_INPUT_MS = 500;
+}

src/GameIdeas/GameIdeas.Shared/Dto/MinMaxDto.cs

@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Dto;
+
+public class MinMaxDto
+{
+    public int? Min { get; set; }
+    public int? Max { get; set; }
+}