Enable mouse scroll or mouse drag in number input?
I have an Offset field for users to adjust a background image a few units to better centralize them if the size is off. Me and a friend felt pressing the arrows to scroll through values was too slow but there was no option to drag with the mouse or use a scroll wheel.
I tried googling this question a few times and every single result was instead on how to disable this behavior. Most posts were a few years old so maybe everyone universally agreed it was bad design and is the new default? But I also love using the mouse to tweak number values in software like Blender and Godot so i don't know.
Does anyone know how to do it? Should I do it, is it bad accessibility or something? Is there a better solution to the initial problem I'm not aware of?
Solution:Jump to solution
Scrolling or mouse drag can be source of accidental triggering, since scrolling is used for scrolling the page.
Isn't it better to use a slider ?...
5 Replies
Solution
Scrolling or mouse drag can be source of accidental triggering, since scrolling is used for scrolling the page.
Isn't it better to use a slider ?
for accidental triggering, i'd assume the scroll would require focus on that element first.
a slider sounds better than what i have but, what would i set as the slider's range?
assuming the tallest image would be a phone portrait at 9:16 (i know there are taller phones) and the default height is 200 for a 4:3 box, the slider would be around [-500, +500] on y axis (the image would be 1000 pixels tall hidden by the 200px tall box.
it's not very clean but i'll try this.
I wouldn't recommend a slider if you need accurate inputs, sliders are usually good for sounds or brightness, things that goes from 0% to 100%
or if you have like steps, for example a slider tick goes up/down by 50px
my recommendation here will be to leave it as number input, set it to a sensible default and maybe add a few buttons with most common aspect ratios
for my purposes (just moving an image) sliders worked better with that 1000px range, but thanks you two!
I know I'm late to the party but if you want to add in the hold and drag functionality, it is pretty simple.
You could do something like:
let isDragging = false;
let startX = 0;
document.addEventListener("mousedown", (event) => { isDragging = true; startX = event.pageX; });
document.addEventListener("mouseup", (event) => { isDragging = false; });
document.addEventListener("mousemove", (event) => {
if (!isDragging) return;
const moved = event.pageX - startX;
startX = event.pageX // So you can continually add moved without keeping state of initial position
// do something with moved
});
for more precise control, you could add fractions of moved or something else