feat(#714): show selected value on range questions#800
Conversation
🦋 Changeset detectedLatest commit: 3e0009f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@latin-panda This is ready for review. Screenshots and some explanation on the issue. Thanks! |
latin-panda
left a comment
latin-panda
left a comment
There was a problem hiding this comment.
This is a much-needed improvement! 🤩
| line-height: 1; | ||
| } | ||
|
|
||
| :deep(.p-slider-handle) { |
There was a problem hiding this comment.
Can we make the selected value 'pop' more? When it's at the very start or end of the slider, it’s harder to distinguish the selection from the labels at first glance. We can center the selected value, and shrinking the min/max numbers, that'd match Collect, for example:
There was a problem hiding this comment.
I also find the stationary selected value in the center of the range a little easier to use than when it's following the thumb.
There was a problem hiding this comment.
I'm not a fan of the stationary selected value because it's not clear to me that it's the selected value and not just the value at the centre of the line. Once you start dragging it's obvious, of course, but if a default value is set then it's important that it's obvious what the value is set to.
than when it's following the thumb
@lognaturel Do you mean because the thumb obscures the value so it's difficult to set accurately on mobile?
There was a problem hiding this comment.
Interesting point! Nicole might have some knowledge of best practices to reference if you want to pull her in. I'm also ok with saying we follow e.g. Material 3 which does pin the value to the thumb: https://m3.material.io/components/sliders/overview
Do you mean because the thumb obscures the value so it's difficult to set accurately on mobile?
To be explicit, I meant the range thumb as in the circle that you move around to select a value, not a human thumb! I don't think that thumb can ever cover the value. For me it's more about having a single place where I always see the current value if I'm looking for a numeric representation rather than looking at where the thumb is. But then again, maybe the more important thing for range questions is the relative position.
I agree with @latin-panda's general observation that styling the value a bit differently from the tick labels would make it clearer that they represent something different. Maybe making it slightly bigger would be enough. I see Material 3 styles it like a callout.
There was a problem hiding this comment.
Awkward timing but I've just changed the slider to centre the value to make it consistent with Collect. It's easy enough to revert the last commit, so have a look below and between the three of us we can just go with the majority?
There was a problem hiding this comment.
You're lightning fast! I'm very happy with that.
| {{ start }} | ||
| </div> | ||
| <div class="range-value"> | ||
| {{ numberValue }} |
There was a problem hiding this comment.
Now that the selected value is showing, I've noticed a bit of a glitch:
Sometimes I need to tap the circle several times to select it. This happens in both Chrome and Firefox.
slider-issue.mp4
Is it a quick win we can include in this PR?
There was a problem hiding this comment.
I bet you're experiencing the issue @gareth pointed out at #777 (comment) Seeing this video makes me think it's more serious than I originally thought.
There was a problem hiding this comment.
I can't think of a way to fix that without changing primevue. The logic to determine the new value is clearly broken which makes it very difficult to select the lowest value. The workaround is to drag the slider which works reliably for me.
I've raised a new issue to track this separately as it's not a quick fix as far as I can see: #801
latin-panda
left a comment
latin-panda
left a comment
There was a problem hiding this comment.
Looks good! Thanks!
3 participants
Closes #714
I have verified this PR works in these browsers (latest versions):
What else has been done to verify that this works as intended?
Why is this the best possible solution? Were any other approaches considered?
How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?
Do we need any specific form for testing your changes? If so, please attach one.
What's changed