Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase the clickable area without visually increasing the progress bar? #69

Open
Aegeontis opened this issue Mar 10, 2024 · 8 comments

Comments

@Aegeontis
Copy link

Is it possible to increase the clickable area/hitbox of the ProgressBar widget, without increasing barHeight or thumbRadius?

@suragch
Copy link
Owner

suragch commented Mar 10, 2024

It might be possible. Can you describe more about your current pain point that caused to you request this?

@Hejianghao
Copy link

I need this feature badly. When it comes to Video Apps, that the progress bar is too large will effect users' watching experience as a result of it blocks some part of the video. At the same time, user maybe like to jump to the different part of the video by dragging the progress bar. So it would be perfect that the progress bar is small with a larger draggable area or tappable area.

@suragch
Copy link
Owner

suragch commented May 30, 2024

Can you show me an image or screenshot where the progress bar is too big and blocks the video?

@Hejianghao
Copy link

IMG_0540
Like the image shows. The height of the progress bar is 5px. It's not easy for user to interact with the progress bar. It would be better if it has a large touchable area while the size remains the same.

@suragch
Copy link
Owner

suragch commented May 30, 2024

I'm just brainstorming a hack. What if you made the thumb radius larger (half of the desired height) and then set its color to transparent? Would that work?

@Hejianghao
Copy link

I'm just brainstorming a hack. What if you made the thumb radius larger (half of the desired height) and then set its color to transparent? Would that work?

You're right. It works.🥳

@max-anders
Copy link

max-anders commented Oct 6, 2024

I also feel that the touchable area could be larger or customizable, as sometimes the slider doesn't react when the user touches slightly next to it. I'd like to keep the thumb radius as is.

@suragch
Copy link
Owner

suragch commented Oct 14, 2024

Another option might be to use a Stack with an invisible layer above the progress bar. Add a gesture detector to the invisible layer and then use that input to update the progress bar.

Hmm, but now that I think about it, I'm not sure if that would work for updating the thumb position without continuously triggering the update callback. I suppose you could ignore any callbacks until your own gesture recognizer is finished. It might work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants