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 {
padding: 0 20px;
margin-right: 20px;
align-content: center;
}

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

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

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

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