custom-cards / slider-button-card

A button card with integrated slider
MIT License
105 stars 16 forks source link

Relative slider positioning #5

Open lizsugar opened 2 years ago

lizsugar commented 2 years ago

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.

lizsugar commented 2 years ago

curious the checks failed because this branch builds and runs just fine 🤔

rohankapoorcom commented 2 years ago

It looks like it wants some linting changes: https://github.com/custom-cards/slider-button-card/runs/6714563334?check_suite_focus=true

lizsugar commented 2 years ago

Alright, those are cleared up