UX-improvement: Use the scroll wheel to increase/decrease the value of a number input

[fulopkovacs]

Feature suggestion

I think it'd be awesome if I could hover over a number input (or click on it), and use the scroll wheel to increase/decrease the value it holds.

Edit: My reasoning for this feature is that I find the scrolling to be more accurate/accessible in some cases. Edit 2.: Oh and I'd also add this feature to the sliders (modifying a slider with the scroll wheel while hovering over it).

[fulopkovacs]

If you like this idea, then lemme know if you need contributors for it! Haven't checked the codebase yet, but would love to make a PR if I can.

[dbismut]

Thanks for the suggestion. It's a tough one as you can't get very precise with wheel because of the inertia. Not sure it's very practical except for fuzzy values. Maybe you could set up a raw sandbox with this implemented see how it goes?

[fulopkovacs]

Thanks for the quick response! 😊 Hmmm, I hear what you're saying. I'll try to create a rough test as you suggested and come back when it's ready.

[fulopkovacs]

Okay, I hacked together a mockup for the sliders and I see that it really is a rather complex UX problem.

Mockup

In my mockup, the sliders are controlled by the "wheel"-events (no dragging). Here are two screen captures demonstrating the behavior:

1. Mouse wheel (MX Logic 2)

https://user-images.githubusercontent.com/43729152/193468711-6ed0a638-fd1b-4b5a-b716-f3ad5c432d70.mp4

2. Trackpad (MacBook Pro (14-inch, 2021))

https://user-images.githubusercontent.com/43729152/193468713-b10358f2-8164-42fd-96c7-85993e209399.mp4

Issues

Aside from the issues caused by the hacky implementation (e.g.: scrolling moves the bg), there are at least two UX-related problems that bother me:

1. "overscrolling" on the trackpad (caused by inertia)
2. scrolling speed

Currently, I sample the first scroll to determine how big a step of the range should be in scrolled pixels. If the first scroll is 100px, then scrolling 200px will add 2 steps to the current number value controlled by the range slider. Unfortunately, this seems to be very annoying when the step is too little and the range is too big.

Summary

I had a fun time hacking on the code base, but now I think maybe it would bring more complexity to the project than value, so I'd be okay with closing this issue. 😅 If you want to see this "feature" live, here's a CodeSandbox that I created by accidentally making a PR (sorry, not gonna abuse the CI again!): https://codesandbox.io/s/leva-minimal-5lx9n1

PS.: The code base looks pretty nice! I loved how easy it was to hack on the project using the sandboxes. 🙌

Edit: grammar/wording

[dbismut]

Hey thanks a lot for the attempt and positive comments! I'll have a look tomorrow. In any case anything that would improve UX is welcomed. I don't have much time to spend on this repo atm to be honest but I'm always happy to discuss ideas!

[GuskiS]

@fulopkovacs You can try setting overscroll-behavior: contain; to container element to fight background scrolling.

[fulopkovacs]

That's a good suggestion! I don't really know how to address the other UX-related issues though (intertia + scrolling speed) though. Those are the main blockers for me.