Range controls and padding in IE10+
While working on a video player for a forthcoming book, I noticed a peculiar spacing issue with \<input type="range"> that affected the layout of this player.
Internet Explorer does something a little weird that no other browser does: it throws several pixels of padding along the top and bottom of the range element by default (Figure 1).
There's so much padding that you don't actually need to touch the range
element in order to change its value -- just bring your mouse or finger
within a 20 pixel (or so) vicinity. The fix is easy, of course. Just use
CSS to change padding ex: padding: 0;
.