Strange white dots in range input on webkit

Question

I'm trying to style range inputs on webkit. Everything works fine on Firefox but webkit display strange white dots around the track.

I read an article about this and took inspiration from it (link).

Now here is the demo. As you can see there are white dots I can't get rid off.

body {
  padding: 30px;
  background-color: black;
}
input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*required for proper track sizing in FF*/
  width: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: black;
  border: none;
  border-radius: 3px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
  margin-top: -4px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

<input type="range">

It must be very simple but I'm still struggling with this.

Thank you

Answer 1

The reason why you have four dots is input tag has default background color. i.e. background-color: white; from user agent stylesheet.

Try following CSS

input[type=range] {
  -webkit-appearance: none;
  border: 0px;
  width: 300px;
  background-color: transparent;
}