Depuración de números

Si usa input type="number", algunos navegadores le brindan una entrada que tiene una interfaz de usuario para incrementar el número, como flechas hacia arriba/abajo (a menudo llamadas "spinners").

A veces eso ayuda un poco. Pero la gente ciertamente ha explorado formas más sofisticadas de actualizar ese número. "Fregar" es una de esas formas. Siempre pienso en Photoshop, que ha apoyado esta interacción durante mucho tiempo:

El otro día vi una demostración de Dominik Jančík en la que hacen esto dentro de un bloque de código. Vea cómo (si está en un dispositivo con un mouse) puede pasar el cursor sobre los números y “barrer” de izquierda a derecha para aumentar o disminuir los números:

Dominik preguntó acerca de ponerlo en CodePen. Creo que eso también sería genial, pero también desconfío un poco de los cambios en el editor principal, ya que me ha mordido la serpiente antes. Sin embargo, es el tipo de cosa perfecta para un complemento CodeMirror y/o Monaco y/o Ace, si alguien así lo desea.

Ya debe existir de alguna manera para Ace porque el editor de Khan Academy lo admite en su editor.

Busqué otros ejemplos y encontré uno bueno de Fabrice Weinberg con muchas opciones:

Pensé que tenía un recuerdo de Dabblet de Lea Verou haciendo esto, pero creo que lo recordaba mal. Sin embargo, presenta algunas ventanas emergentes interesantes:

También admite ⌥+ ↑y ⌥+ ↓para incrementar números. ¡CodePen hace eso! Apoyamos a Emmet, que impulsa esa función.

¿Alguna vez os habéis topado con una UX de limpieza de números que realmente os guste?