4 ms·
Super-Fast Numeric Input with HTML Ranges – Part 1
- brudgers 10y agoGenuinely curious about the rationals for using non-standard CSS, e.g. webkit-slider-thumb.
- Neeek 10y agoDidn't they say that certain browsers render elements differently and they wanted a consistent experience?
- joechrysler 10y agoSadly, 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-range-inputs-css/ https://css-tricks.com/styling-cross-browser-compatible-rang...
- ams6110 10y agoFrom 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 10y agoI 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.
- thinkMOAR 10y agoAs long as nobody sees/considers it as input validation/restriction :)