Super-Fast Numeric Input with HTML Ranges – Part 1

[philk10]

https://spin.atomicobject.com/2016/07/20/numeric-input-html-ranges-part-1/#.V49ym7utlR4.hackernews

[ams6110]

From the first screenshot, it looks like their final version has a vertical range slider under each numeric position. Why use a slider vs. simply having the individual number options? E.g. something like:

  1 . 4 6
  -   - -
  2   9 9
  1   8 8
  0   7 7
      6 6
      5 5
      4 4
      3 3
      2 2
      1 1
      0 0

That way you just need to touch the number you want, and not need to manipulate a slider, possibly overshooting the value, etc.

[Neeek → ams6110]

I would imagine dividing the column in to ten segments would leave them rather small and difficult to hit accurately, on screen keyboards for instance require a certain amount of prediction to guide missed clicks; a fader lets you dial it in. If you've ever played a stringed instrument (fretless that is), you will know that it's easier to miss your note by a little and then roll your finger to adjust than it is to simply get the note first try without some kind of tactile feedback like a fret, or in the app's case, a physical button.

[brudgers]

Genuinely curious about the rationals for using non-standard CSS, e.g. webkit-slider-thumb.

[joechrysler → brudgers]

Sadly, the slider-thumb/slider-track pseudo-element selectors haven't been standardized yet. There are prefixed selectors available for all the major rendering engines, but we were only targeting webkit-based browsers (more specifically, we were building for a webkit-based web view in a Xamarin app for iOS and Android). CSS-Tricks has a good writeup if you're interested: https://css-tricks.com/styling-cross-browser-compatible-rang...

[Neeek → brudgers]

Didn't they say that certain browsers render elements differently and they wanted a consistent experience?

[thinkMOAR]

As long as nobody sees/considers it as input validation/restriction :)