[apps/picker] input number step setting #330
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
LeaVerou
approved these changes
Feb 6, 2024
|
Thank you @sidewayss!! |
|
Glad to see that it works, and without any edits. I was making a semi-educated guess. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The
<input type="number">that floats above the color sliders doesn't have the step attribute set, so it's always set to 1. This fix should set it to the correct resolution. The italics are because I have not figured out how to view the page with these changes. Sorry about that. I'm new to npm and I rannpm run watch:htmlbut then I didn't know what port to use or how to view the changes in a browser. Github Pages won't build a site either. I'm also unfamiliar with the ":attribute" syntax, as in:style="...". The<input type="range">right above the number spinner sets this same property this same way, so this seems to me like a viable fix.If you want to reproduce this as a problem, select any RGB color space and try to change a value using one of these inputs. It displays 0.XXX but the step is set to 1, so if you click on either spin button it sets to value to 0 or 1 immediately.
Also note: On both Chrome and Firefox in Windows, the spinner buttons crowd the numbers. Part of the problem is that the numbers are not truncated/rounded and can have lots of decimals, but the control should be a bit wider regardless. I didn't see any styling for it. Maybe the width is set via "https://stretchy.verou.me/dist/stretchy.iife.min.js"?
If someone points me in the right direction I can amend this PR to include a rounding or truncating of these numbers to the precision set by the precision input or to some fixed value. If it's set to the user setting, then the width will have to adjust accordingly.