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?
The post Number Scrubbing appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
source https://css-tricks.com/number-scrubbing/
No comments:
Post a Comment