If you use <input type="number">, some browsers give you an input that has UI for incrementing the number, like up/down arrows (often called “spinners”).
That’s a bit helpful sometimes. But people have certainly explored fancier ways of updating that number. “Scrubbing” is one of those ways. I always think of Photoshop here, which has supported this interaction for a long time:
I saw a demo from Dominik Jančík the other day where they do this within a block of code. See how (if you’re on a device with a mouse) you can hover over the numbers and “scrub” from left to right to increase or decrease the numbers:
Dominik inquired about putting it on CodePen itself. I think that would be cool too, but I’m also a little leery of changes to the core editor, as I’ve been snakebitten by it before. It’s the perfect sort of thing for a CodeMirror and/or Monaco and/or Ace plugin, though, if anyone is so inclined.
It must already exist somehow for Ace because the Khan Academy editor supports it in their editor.
I poked around looking for other examples, and came across a good one from Fabrice Weinberg with lots of options:
I thought I had a memory of Lea Verou’s Dabblet doing this, but I think I remembered wrong. It does do some cool popups though:
It also supports ⌥+↑ and ⌥+↓ for incrementing numbers. CodePen does that! We support Emmet, which powers that feature.
| Key Binding | Increment |
|---|---|
Ctrl+↑ | Number + 1 |
Ctrl+↓ | Number – 1 |
Ctr+Alt+↑ | Number + 10 |
Ctrl+Alt+↓ | Number – 10 |
Alt+ ↑ | Number + 0.1 |
Alt+ ↓ | Number – 0.1 |
Y’all ever run across a number scrubber UX that you really like?
Award for best input/general UX goes to Blender in my opinion. I wish all editing software would implement similar interactions.
Photoshop & Illustrator have been having similar interactions since ages ago.
Completely unfriendly for mobile users…
If you can’t manually type in a number and the interaction isn’t well-explained and touch-friendly, yes.
If you can type in a number, it’s exactly as friendly as any other number input.
To be honest, the new iOS 14 does have ‘scrubber’ but is vertical which is nice. You can check that time on calendar and clock, too.
I wonder how Bret Victor does it (I am yet to watch the video till the end)
Number scrubbers are a terrible idea. I can’t express how angry I get at seeing them implemented badly. I’ve ditched websites and gone everywhere with my money when I come across a website with a slider that is impossible to edit by just typing in a number. Never forget best practice for accessibility! You need to ensure a user can override your cool looking widgets because not everyone can use them.
I recently built keyboard shortcuts to increase/decrease values following how Devtools does it:
Up/down arrow: change by 1
Shift + up/down arrow: change by 10
Ctrl/cmd + up/down arrow: change by 100
Alt + up/down arrow: change by 0.1
I wrote about that here: https://kilianvalkhof.com/2020/javascript/supercharging-input-type-number/
I will probably implement the same logic for holding shift/cmd/alt and scrolling. Scrubbing is interesting but it works best the way Photoshop implements it, by dragging on the icon, not the value itself. Dragging on the value probably interferes with drag-to-select, and that’s often worth keeping.
That is so cool! I love that scrubbing thing. I really can’t stand the little arrows.
I wondered if scrubbing thing is accessible, like is keyboard-friendly? If not, they should use left/right arrows to increase and SHIFT left/right arrows for every 10 increment or something like that.