Correct bunch of issues (#36)
All checks were successful
Game Ideas deploy / build-test-deploy (push) Successful in 1m28s

Reviewed-on: #36
This commit was merged in pull request #36.
This commit is contained in:
2025-04-29 23:49:11 +02:00
parent d3d16493e6
commit f3c9e1d9da
37 changed files with 246 additions and 186 deletions

View File

@@ -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"
@bind="@Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
<input type="range" id="max-range" style="@StatusColor(Max)" min="@Params.Min" max="@Params.Max"
@bind="@Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
<input type="range" id="min-range" style="@StatusColor(Value.Min)" min="@Params.Min" max="@Params.Max"
@bind="@Value.Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
<input type="range" id="max-range" style="@StatusColor(Value.Max)" min="@Params.Min" max="@Params.Max"
@bind="@Value.Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
<div class="values">
<span class="value">@Min</span>
<span class="value">@Max</span>
<span class="value">@Value.Min</span>
<span class="value">@Value.Max</span>
</div>
</div>

View File

@@ -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 EventCallback<int> MaxChanged { get; set; }
[Parameter] public int Min { get; set; }
[Parameter] public EventCallback<int> MinChanged { get; set; }
[Parameter] public MinMaxDto Value { get; set; } = new() { Min = 1, Max = 5 };
[Parameter] public EventCallback<MinMaxDto> ValueChanged { 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,
};
await MaxChanged.InvokeAsync(Max);
Timer.Elapsed += async (_, _) => await ValueChanged.InvokeAsync(Value);
base.OnInitialized();
}
private async Task HandleSlideOnInput()
private void HandleSlideTwoInput()
{
if (Max - Min <= Params.Gap)
if (Value.Max - Value.Min <= Params.Gap)
{
Max = Min + Params.Gap;
Value.Min = Value.Max - Params.Gap;
}
await MinChanged.InvokeAsync(Min);
Timer?.Stop();
Timer?.Start();
}
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 percent2 = (double)(Max - Params.Min) / (Params.Max - Params.Min) * 100;
var percent1 = (double?)(Value.Min - 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});";