Range input thumb doesn't align with axis ticks
<p>The thumb a.k.a. knob in this <a href="http://codepen.io/ryanve/pen/VmZXxj" rel="nofollow noreferrer"><code>input[type=range]</code> codepen</a> doesn't line up correctly with the ticks. It seems to be off by a different amount (left or right) depending on the value. Try moving the thumb to see. What CSS can I use to make the thumb line up with the current tick such that it works for all the ticks on the axis?</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input.range {
  -webkit-appearance: none;
  bottom: -10px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
input.range:focus {
  outline: 0;
}
input.range::-moz-focus-outer {
  border: 0;
}
input.range::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.5px;
}
input.range::-moz-range-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}
input.range::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
  background: indigo;
  border-radius: 20px;
  border: 0;
}
input.range::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
  background: indigo;
  border-radius: 20px;
  border: 0;
}
input.range::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input.range::-ms-thumb {
  box-shadow: 1px 1px 1px black, 0px 0px 1px black;
  border: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  height: 5px;
}
input.range::-ms-fill-lower,
input.range::-ms-fill-upper {
  background: indigo;
  border: 0;
  border-radius: 40px;
  box-shadow: 1px 1px 1px transparent, 0px 0px 1px rgba(13, 13, 13, 0);
}
.range__tick {
  fill: silver;
}
.range__tick:first-child {
  -webkit-transform: translateX(2px);
  -moz-transform: translateX(2px);
  -ms-transform: translateX(2px);
  -o-transform: translateX(2px);
  transform: translateX(2px);
}
.range__tick:last-child {
  -webkit-transform: translateX(-3px);
  -moz-transform: translateX(-3px);
  -ms-transform: translateX(-3px);
  -o-transform: translateX(-3px);
  transform: translateX(-3px);
}
.range__field {
  border: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset class="range__field"&gt;
  &lt;input class="range" type="range" min="0" max="10"&gt;
  &lt;svg role="presentation" width="100%" height="10" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;rect class="range__tick" x="0%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="10%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="20%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="30%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="40%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="50%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="60%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="70%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="80%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="90%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
    &lt;rect class="range__tick" x="100%" y="3" width="1" height="10"&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  &lt;svg role="presentation" width="100%" height="14" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;text class="range__point" x="0%" y="14" text-anchor="start"&gt;0&lt;/text&gt;
    &lt;text class="range__point" x="10%" y="14" text-anchor="middle"&gt;1&lt;/text&gt;
    &lt;text class="range__point" x="20%" y="14" text-anchor="middle"&gt;2&lt;/text&gt;
    &lt;text class="range__point" x="30%" y="14" text-anchor="middle"&gt;3&lt;/text&gt;
    &lt;text class="range__point" x="40%" y="14" text-anchor="middle"&gt;4&lt;/text&gt;
    &lt;text class="range__point" x="50%" y="14" text-anchor="middle"&gt;5&lt;/text&gt;
    &lt;text class="range__point" x="60%" y="14" text-anchor="middle"&gt;6&lt;/text&gt;
    &lt;text class="range__point" x="70%" y="14" text-anchor="middle"&gt;7&lt;/text&gt;
    &lt;text class="range__point" x="80%" y="14" text-anchor="middle"&gt;8&lt;/text&gt;
    &lt;text class="range__point" x="90%" y="14" text-anchor="middle"&gt;9&lt;/text&gt;
    &lt;text class="range__point" x="100%" y="14" text-anchor="end"&gt;10&lt;/text&gt;
  &lt;/svg&gt;
&lt;/fieldset&gt;</code></pre>
</div>
</div>
</p>