137 lines
4.5 KiB
Plaintext
137 lines
4.5 KiB
Plaintext
<div class="track-progress-container @ColorClass" @onwheel="HandleWheel">
|
|
@* Фоновая дорожка *@
|
|
<div class="progress-base-track">
|
|
@* Буфер *@
|
|
<div class="progress-buffer-bar" style="width: @(CalculatePercentage(BufferValue))%"></div>
|
|
@* Активная шкала (заполнение) *@
|
|
<div class="progress-active-bar" style="width: @(CalculatePercentage(Value))%"></div>
|
|
</div>
|
|
|
|
@* Ползунок *@
|
|
<input type="range"
|
|
min="@Min.ToString(System.Globalization.CultureInfo.InvariantCulture)"
|
|
max="@Max.ToString(System.Globalization.CultureInfo.InvariantCulture)"
|
|
step="0.01"
|
|
value="@Value.ToString(System.Globalization.CultureInfo.InvariantCulture)"
|
|
@oninput="OnInput"
|
|
class="progress-input" />
|
|
</div>
|
|
|
|
<style>
|
|
.track-progress-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
--track-color: var(--mud-palette-primary); /* Дефолт */
|
|
}
|
|
|
|
/* Привязка цветов MudBlazor */
|
|
.track-color-primary { --track-color: var(--mud-palette-primary); }
|
|
.track-color-secondary { --track-color: var(--mud-palette-secondary); }
|
|
.track-color-info { --track-color: var(--mud-palette-info); }
|
|
.track-color-success { --track-color: var(--mud-palette-success); }
|
|
.track-color-warning { --track-color: var(--mud-palette-warning); }
|
|
.track-color-error { --track-color: var(--mud-palette-error); }
|
|
|
|
.progress-base-track {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: var(--mud-palette-action-disabled-background);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-buffer-bar {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: var(--mud-palette-action-default-hover);
|
|
transition: width 0.3s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
.progress-active-bar {
|
|
position: absolute;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: var(--track-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.progress-input {
|
|
position: absolute;
|
|
width: 100%;
|
|
background: transparent;
|
|
-webkit-appearance: none;
|
|
z-index: 5;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Стили шарика (Thumb) */
|
|
.progress-input::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
height: 14px;
|
|
width: 14px;
|
|
border-radius: 50%;
|
|
background: var(--track-color);
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
|
|
box-shadow: var(--mud-elevation-2);
|
|
border: 2px solid var(--mud-palette-surface);
|
|
}
|
|
|
|
.progress-input::-moz-range-thumb {
|
|
height: 14px;
|
|
width: 14px;
|
|
border-radius: 50%;
|
|
background: var(--track-color);
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
border: 2px solid var(--mud-palette-surface);
|
|
}
|
|
|
|
.track-progress-container:hover .progress-input::-webkit-slider-thumb { opacity: 1; }
|
|
.track-progress-container:hover .progress-input::-moz-range-thumb { opacity: 1; }
|
|
|
|
.progress-input:focus { outline: none; }
|
|
</style>
|
|
|
|
@code {
|
|
[Parameter] public double Value { get; set; }
|
|
[Parameter] public double BufferValue { get; set; }
|
|
[Parameter] public double Min { get; set; } = 0;
|
|
[Parameter] public double Max { get; set; } = 100;
|
|
[Parameter] public Color Color { get; set; } = Color.Primary;
|
|
[Parameter] public EventCallback<double> ValueChanged { get; set; }
|
|
|
|
// Генерируем CSS класс на основе перечисления Color
|
|
private string ColorClass => $"track-color-{Color.ToString().ToLower()}";
|
|
|
|
private async Task OnInput(ChangeEventArgs e)
|
|
{
|
|
if (double.TryParse(e.Value?.ToString(), System.Globalization.NumberStyles.Any, System.Globalization.CultureInfo.InvariantCulture, out var newValue))
|
|
{
|
|
await ValueChanged.InvokeAsync(newValue);
|
|
}
|
|
}
|
|
|
|
private async Task HandleWheel(WheelEventArgs e)
|
|
{
|
|
double range = Max - Min;
|
|
double step = range * 0.02;
|
|
var newValue = e.DeltaY < 0 ? Math.Min(Value + step, Max) : Math.Max(Value - step, Min);
|
|
await ValueChanged.InvokeAsync(newValue);
|
|
}
|
|
|
|
private double CalculatePercentage(double val)
|
|
{
|
|
if (Max <= Min) return 0;
|
|
return ((Math.Clamp(val, Min, Max) - Min) / (Max - Min)) * 100;
|
|
}
|
|
} |