fix(slider): align initial fill position with stepped midpoint#26408
fix(slider): align initial fill position with stepped midpoint#26408AlexGaillard merged 5 commits intodirectus:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes an issue where the slider component's initial fill and label position were incorrectly centered at 50% when no value was provided and the actual stepped midpoint differed from the arithmetic midpoint. The fix aligns the slider's behavior with native HTML5 range input stepped behavior by calculating the nearest valid stepped value to the midpoint.
Key Changes:
- Updated the type definition for
modelValueto explicitly acceptnull - Replaced hardcoded 50% default with a calculated stepped midpoint that respects the
stepprop - Added edge case handling for when
max === min - Added test coverage for the stepped midpoint calculation
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
contributors.yml |
Added new contributor DamnItAzriel to the list |
app/src/components/v-slider.vue |
Fixed slider fill calculation to use stepped midpoint instead of hardcoded 50% when modelValue is null/undefined |
app/src/components/v-slider.test.ts |
Added test to verify stepped midpoint calculation produces correct percentage (60% for min=0, max=5, step=1) |
.changeset/giant-buckets-spend.md |
Added changeset documenting the patch fix for the slider component |
AlexGaillard
left a comment
AlexGaillard
left a comment
There was a problem hiding this comment.
Thanks for this @DamnItAzriel. Just some small things and I think we're good to go. 😃
DamnItAzriel
force-pushed
the
fix-slider-initial-fill
branch
from
33148e5 to
5b4364d
Compare
|
@AlexGaillard Thank you very much for your kind review. This means a lot as this is my first PR. I have made the changes requested here. Please check and let me know if anything. |
DamnItAzriel
force-pushed
the
fix-slider-initial-fill
branch
from
ab7895a to
d310efb
Compare
AlexGaillard
left a comment
AlexGaillard
left a comment
There was a problem hiding this comment.
LGTM, nice one @DamnItAzriel 👍
Thanks. 😃 |
Scope
What's changed:
minandmaxis not a valid stepped value<input type="range">stepped behaviorPotential Risks / Drawbacks
Tested Scenarios
min = 0,max = 5,step = 1Review Notes / Questions
Checklist
Fixes #26406