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
↓ for incrementing numbers. CodePen does that! We support Emmet, which powers that feature.
||Number + 1|
||Number – 1|
||Number + 10|
||Number – 10|
||Number + 0.1|
||Number – 0.1|
Y’all ever run across a number scrubber UX that you really like?
You can support CSS-Tricks by being an MVP Supporter.