Tiffany B. Brown

15 October 2013

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).

![Padding around in Internet Explorer 10.](http://webinista.s3.amazonaws.com/images/uploads/2013/10/range-IE10-padding.png)Padding around `` 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;.