Relative slider positioning #5
Open
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
Mouse or touch event can now continue outside of card bounds to continue adjusting the slider by relative position change. This is incredibly helpful on small mobile displays.
…ement inherited abstract member" error
|
curious the checks failed because this branch builds and runs just fine 🤔 |
|
It looks like it wants some linting changes: https://github.com/custom-cards/slider-button-card/runs/6714563334?check_suite_focus=true |
|
Alright, those are cleared up |
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.
Previously, slider value was based on your absolute finger or mouse position within the bounds of the slider track. This resulted in a light at 10% suddenly shooting up to 90% because that's where your finger or mouse touched the slider and moved. Two changes are made in this PR:
The slider now changes value based on the relative movement your mouse or finger moves. e.g If the light is at 10% and you touch the slider at 70%, then drag up to 80%, that is a difference of +10% and thus the light now gets set to 20%. This feels much more natural and operates more like the Google Home app interface (which uses cards very much like slider-button-card).
Because of this, sometimes the slider needs to move even when your finger is no longer inside the bounds of the slider itself. This has been fixed. If the light is at 10%, and you grab the slider at 90% and move your finger beyond the right edge of the slider, the slider keeps moving in tune with your finger's travel distance. This also works off the left edge, as well as the top and bottom edges for vertical sliders.
All of this makes managing the slider much easier on small mobile or wall mounted screens, and when the desired values are right at the screen edge. I've also found it makes the web experience just that much nicer too.
This has been tested on mobile android app as well as the web version. With vertical and horizontal sliders. With all slider card types.