PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Enhanced slider for game form
All checks were successful
Game Ideas build for PR / build_test (pull_request) Successful in 42s
Details

Browse Source
This commit is contained in:
Egamorf
2025-04-29 21:52:10 +02:00
parent ba2c065753
commit 4f7e7156ed
3 changed files with 17 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
View File

@@ -69,7 +69,7 @@
} }
.slider { .slider {
padding: 0 20px; margin-right: 20px;
align-content: center; align-content: center;
} }

13
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor
View File

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

21
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
View File

@@ -1,7 +1,7 @@
.container { .input {
position: relative;
width: 100%; width: 100%;
z-index: 0 position: relative;
height: 2px;
} }
input[type="range"] { input[type="range"] {
@@ -24,7 +24,6 @@ input[type="range"] {
margin: auto; margin: auto;
border-radius: 2px; border-radius: 2px;
background: var(--input-primary); background: var(--input-primary);
} }
input[type="range"]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track {
@@ -75,15 +74,13 @@ input[type="range"]::-ms-thumb {
} }
.values { .values {
display: flex;
position: absolute;
margin-top: 2px;
width: 100%;
font-weight: bold; font-weight: bold;
justify-content: space-between; width: 1em;
} }
.value { .container {
width: 1em; gap: 8px;
text-align:center; width: 100%;
display: flex;
align-items: center;
} }