Input type="range" formatting oddities

Created by: Steve-OH

If we stack a text or number style input over a range input inside a col-xx div, they don't align very well:

<div class="col-md-3">
  <input type="number" class="form-control input-sm" />
  <input type="range" />
</div>

We can fix the alignment by adding a col-xx-12 class to the range input:

<div class="col-md-3">
  <input type="number" class="form-control input-sm" />
  <input type="range" class="col-md-12" />
</div>

But now the slider doesn't go all the way to the ends of the "track":

We have to remove the padding to get the slider to work correctly:

<div class="col-md-3">
  <input type="number" class="form-control input-sm" />
  <input type="range" class="col-md-12" style="padding:0;" />
</div>

(Screenshots are all from Chrome 31 on Windows 7.)