Input type range slider custom thumb not showing up in chrome

Question

I have some css code for a custom input of type range. The slider background shows up fine but the slider thumb only shows up correctly (or rather how I intended) in firefox. In chorme its still the default blue circle.

There may be some redundant things in the code right now because I was testing a lot to fix my issue. CSS Code for the slider styling:

/* General */

.Slider input[type="range"] {
  width: 100px;
  height: 13px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  background: url(./assets/img/Special_Menu.png) 0 -145px;
  border-color: transparent;
}


/* Chrome */

.Slider input[type="range"]::-webkit-slider-runnable-track {
  background: url(./assets/img/Special_Menu.png) 0 -143px;
}

.Slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 11px;
  background: url(./assets/img/Special_Menu.png) 0 -160px;
}


/* Firefox */

.Slider input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 11px;
  background-color: transparent;
  background: url(./assets/img/Special_Menu.png) 0 -160px;
  border-color: transparent;
}

<div class="Menu">
  <div id="SFX"></div>
  <div class="Slider">
    <input type="range" min="0" max="100" />
  </div>
  <div id="Music"></div>
  <div class="Slider">
    <input type="range" min="0" max="100" />
  </div>
</div>
</div>

Answer 1

You have to include -webkit-appearance: none; on the actual slider as well to in order to disable the default styles.

It won't show up in this snippet however because I don't have any actual images linked

/* General */

.Slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 13px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  background: url(./assets/img/Special_Menu.png) 0 -145px;
  border-color: transparent;
}


/* Chrome */

.Slider input[type="range"]::-webkit-slider-runnable-track {
  background: url(./assets/img/Special_Menu.png) 0 -143px;
}

.Slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 11px;
  background: url(./assets/img/Special_Menu.png) 0 -160px;
  background-color: transparent;
}


/* Firefox */

.Slider input[type="range"]::-moz-range-thumb {
  width: 4px;
  height: 11px;
  background-color: transparent;
  background: url(https://img.buzzfeed.com/thumbnailer-prod-us-east-1/30bc761b30c0414481db84df78bed152/BFV10402_Sliders4Ways.jpg) 0 -160px;
  border-color: transparent;
}

<div class="Menu">
  <div id="SFX"></div>
  <div class="Slider">
    <input type="range" min="0" max="100" />
  </div>
  <div id="Music"></div>
  <div class="Slider">
    <input type="range" min="0" max="100" />
  </div>
</div>
</div>