Correct bunch of issues (#36)
All checks were successful
Game Ideas deploy / build-test-deploy (push) Successful in 1m28s
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:
@@ -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>
|
||||
|
||||
@@ -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});";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user