Removing single pixel space around input slider - html

Question

Can someone help me figure out why there's a single pixel space between the border of the input range and the top and right edge of the thumb slider? I don't recall this being here before and I can't figure out what is causing it.
#media screen and (min-width:720px) {
.financecalc {
margin-bottom: 0;
width: 300px;
}
.financetext {
width: calc(100% - 330px);
}
}
#media screen and (min-width:960px) {
.financecalc {
width: 400px;
}
.financetext {
width: calc(100% - 430px);
}
}
.paycalc {
background-color: white;
border: 2px solid #b2221b;
border-radius: 8px;
box-shadow: 0 3px 5px 1px black;
padding: 10px;
text-align: center;
width: calc(100% - 24px);
}
.paycalc label {
display: block;
margin-bottom: 4px;
}
.paycalc input[type=range] {
-webkit-appearance: none;
background: #f0f0f0;
border: 2px solid #b2221b;
border-radius: 4px;
display: block;
height: 16px;
opacity: 0.9;
outline: none;
padding: 0;
width: calc(100% - 4px);
}
.paycalc input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 16px;
background: #b2221b;
cursor: pointer;
}
.paycalc input[type=range]::-moz-range-thumb {
width: 20px;
height: 16px;
background: #b2221b;
cursor: pointer;
}
.calcSlider {
margin-bottom: 0;
width: calc(100% - 100px);
}
#interestSlider {
direction: rtl;
}
.calcBox,
.interestBox,
.paymentBox {
background-color: #555;
border: 3px inset #909090;
border-radius: 2px;
color: white;
padding: 6px;
}
.calcBox {
margin-bottom: 0;
width: 62px;
}
.interestBox {
width: 100%;
}
.paymentBox {
width: calc(100% - 18px);
}
.calcBox div,
.paymentBox div {
color: inherit;
margin: 0;
}
.calcBox div:first-of-type,
.paymentBox div:first-of-type {
font-size: 12px;
width: 12px;
}
.calcBox div:last-of-type,
.paymentBox div:last-of-type {
font-size: 18px;
width: calc(100% - 14px);
}
<div id="calculator" class="financecalc">
<form id="myForm" class="paycalc">
<div class="calcSlider">
<label for="downPaymentSlider">Down Payment</label>
<input id="downPaymentSlider" name="downPaymentSlider" type="range" value="500" min="250" max="5000" step="50">
</div>
</form>
</div>

Answer 1

The white line can appear at various zoom levels depending on how the system is mapping CSS pixels to screen pixels (there being several screen pixels to a CSS pixel on many higher def screens nowadays).
It's a bit like a rounding error, a screen pixel can get 'left behind' in the calculations.
As your thumb and your border are the same color here's a slightly unpleasant hack, but it overcomes the problem visually.
This snippet makes the height of the thumb equal to the height of the input element plus its top and bottom borders - this gives the system lots of wiggle room when it's dropping or including a screen pixel and the user won't see bits of white.
#media screen and (min-width:720px) {
.financecalc {
margin-bottom: 0;
width: 300px;
}
.financetext {
width: calc(100% - 330px);
}
}
#media screen and (min-width:960px) {
.financecalc {
width: 400px;
}
.financetext {
width: calc(100% - 430px);
}
}
.paycalc {
background-color: white;
border: 2px solid #b2221b;
border-radius: 8px;
box-shadow: 0 3px 5px 1px black;
padding: 10px;
text-align: center;
width: calc(100% - 24px);
}
.paycalc label {
display: block;
margin-bottom: 4px;
}
.paycalc input[type=range] {
-webkit-appearance: none;
background: #f0f0f0;
border: 2px solid #b2221b;
border-radius: 4px;
display: block;
height: 16px;
opacity: 0.9;
outline: none;
padding: 0;
width: calc(100% - 4px);
}
.paycalc input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 16px;
height: 20px;
/* 16px + 2x2px */
background: #b2221b;
cursor: pointer;
}
.paycalc input[type=range]::-moz-range-thumb {
width: 20px;
height: 20px;
background: #b2221b;
cursor: pointer;
}
.calcSlider {
margin-bottom: 0;
width: calc(100% - 100px);
}
#interestSlider {
direction: rtl;
}
.calcBox,
.interestBox,
.paymentBox {
background-color: #555;
border: 3px inset #909090;
border-radius: 2px;
color: white;
padding: 6px;
}
.calcBox {
margin-bottom: 0;
width: 62px;
}
.interestBox {
width: 100%;
}
.paymentBox {
width: calc(100% - 18px);
}
.calcBox div,
.paymentBox div {
color: inherit;
margin: 0;
}
.calcBox div:first-of-type,
.paymentBox div:first-of-type {
font-size: 12px;
width: 12px;
}
.calcBox div:last-of-type,
.paymentBox div:last-of-type {
font-size: 18px;
width: calc(100% - 14px);
}
<div id="calculator" class="financecalc">
<form id="myForm" class="paycalc">
<div class="calcSlider">
<label for="downPaymentSlider">Down Payment</label>
<input id="downPaymentSlider" name="downPaymentSlider" type="range" value="500" min="250" max="5000" step="50">
</div>
</form>
</div>