
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
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
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...](https://css-
tricks.com/styling-cross-browser-compatible-range-inputs-css/)

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

