Slider Usability and Positioning on Mobile

On mobile, the text panel currently has three ‘notches’ where it can rest.

The top one is quite high leaving a tiny sliver of map. Say 85% covering the map.
The second one is (on my small-screened iPhone) just a little below that top one. Approximately 80% covering the map.
The third one is mostly map and a little bit of text. Text panel covers approximately 35% of the map.

What we lack is an even split — right now it’s kind of too-much text or too-much map.

[ ] Can we add another notch at 50%?
[ ] (less important) Can we also allow the user to use any percentage they desire (but still allow some ‘snap to’-action when near a snap point).

If you need examples, contact me. You see these ‘notchy’ panels in UI sidebars often.

What did you observe or what is a likely problem?

The slider that displays food bank information on mobile takes up too much screen space at the start and slides in a notchy manner, which impacts user experience.

What is the user trying to do?

Users are trying to view food bank information before and after clicking a map pin.

How many people are / will be having this problem?

What device is this happening on / what is the user’s context?

Possible challenges, solutions? Challenges:

Ensuring the slider is fluid and responsive, adjusting initial positioning without impacting other layout elements.

Solutions:

Modify the slider's initial position to start at the 50% mark of the screen.
Allow most any text slider position that user wants (except off-screen — the handle and some text should always be visible so user doesn’t lose the text panel altogether)

How this problem is addresssed elsewhere (possibly screenshots)? Look at similar applications for design inspiration. Consider using libraries that facilitate smooth drag-and-drop interactions (e.g., React Spring or Framer Motion).
External documentation, recommendations and guides? Review the documentation of UI frameworks like Material-UI or Bootstrap for best practices on modals and sliders.
Things to think about? User feedback on the current experience may provide insights for improvement.
How do others solve this? Research competitors’ apps to see how they handle slider functionalities on mobile.

Research, internal/external testing, design?

Developers can collaborate with the design team to prototype the updated slider functionality.
Implement and test changes in a development environment.

hackforla / food-oasis