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).
<input type="range"> in Internet Explorer 10.
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;.