How to change color for a slider runnable track in Chrome?

Question

I have to change the color of track ie it will be in one color before it slides and another color after sliding. It is working fine for Firefox and for Chrome it is not working. I am also facing issue with top for pointer (class) in css, it takes different for both browsers.

CSS:

body {

  color: red;
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin: 0;
}

header {

  background-color: white;  
  padding: 60px 40px;
}


h1 {
  font-size: 200%;
}

h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

p {
  font-size: 90%;
  font-weight: normal;
}

article {
  -webkit-column-count: 4;
  column-count: 4;
}

p {
  margin: 0px;
}

/**
 * Text Slider Directive - CSS  
 **/
.text-size-slider {
  line-height: 100%;
  font-size: 14px;
  position: relative;
}

.text-size-slider .small-letter,.text-size-slider .big-letter
{
  font-weight: bold;
}

.text-size-slider .slider {
  -webkit-appearance: none;
  margin: 0 8px;
}

.text-size-slider .slider:focus {
  outline: none;
}

.text-size-slider .slider::-webkit-slider-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}
.text-size-slider .slider::-moz-range-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}

.text-size-slider .slider::-webkit-slider-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}
.text-size-slider .slider::-moz-range-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}

.pointer {
    vertical-align:top;
  height: 40px;
  width: 40px;
  border-radius:20px 20px  0 20px;
  background-color:rgba(192, 35, 74, 1);
  display:block;
  transform: rotate(45deg);
  position:absolute;
  top: -46px;
  margin-left:13px;

  color:black;

}

.pointer span {
  display: inline-block;
  transform: rotate(-45deg);
  margin-left:12px;
  margin-top: 14px;
  color:white;


}

.text-size-slider .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: rgba(192, 35, 74, 1);
  border: 0;
}

.text-size-slider .slider::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
   background-color: grey;
  border: 0;
}
.text-size-slider .slider::-moz-range-progress {
  background-color: rgba(192, 35, 74, 1); 
}
.text-size-slider .slider::--webkit-slider-runnable-progress {
  background-color: rgba(192, 35, 74, 1); 
}

Here is my plunker link: https://plnkr.co/edit/ecU8KvlO2jWGWy4jVAcS?p=preview