chylex/Minecraft-Phantom-Panel
1
0
Fork 0
mirror of https://github.com/chylex/Minecraft-Phantom-Panel.git synced 2025-05-03 06:34:06 +02:00
Code

Fix centering of HTML range inputs so that background color split is positioned correctly

Browse Source
This commit is contained in:
chylex 2023-02-07 23:20:39 +01:00
parent 81bcb91566
commit 125239b48d
Signed by: chylex
GPG Key ID: 4DE42C8F19A80548
2 changed files with 1 additions and 1 deletions
Server/Phantom.Server.Web
Shared
InstanceAddOrEditForm.razor
wwwroot/css
site.css

1
Server/Phantom.Server.Web/Shared/InstanceAddOrEditForm.razor
View File

@ -116,7 +116,6 @@
const ushort MinimumMemoryUnits = 2;
ushort maximumMemoryUnits = form.MaximumMemoryUnits;
double availableMemoryRatio = maximumMemoryUnits <= MinimumMemoryUnits ? 100.0 : 100.0 * (form.AvailableMemoryUnits - MinimumMemoryUnits) / (maximumMemoryUnits - MinimumMemoryUnits);
// TODO not precise because the track is not centered on the track bar
string memoryInputSplitVar = FormattableString.Invariant($"--range-split: {Math.Round(availableMemoryRatio, 2)}%");
}
<FormNumberInput Id="instance-memory" Type="FormNumberInputType.Range" DebounceMillis="0" DisableTwoWayBinding="true" @bind-Value="form.MemoryUnits" min="@MinimumMemoryUnits" max="@maximumMemoryUnits" disabled="@(maximumMemoryUnits == 0)" class="form-range split-danger" style="@memoryInputSplitVar">

1
Server/Phantom.Server.Web/wwwroot/css/site.css
View File

@ -63,6 +63,7 @@ code {
.form-range.split-danger::-moz-range-track,
.form-range.split-danger::-webkit-slider-runnable-track {
width: calc(100% - 1rem);
background: linear-gradient(to right, #dfd7ca 0%, #dfd7ca var(--range-split), #bf8282 var(--range-split), #bf8282 100%);
}