如何更改Chrome中滑块可运行轨道的颜色？

Question

我必须改变轨道的颜色，即在滑动之前它将是一种颜色，在滑动之后它将是另一种颜色。它适用于Firefox和Chrome无法正常工作。我也面临着css中指针（类）顶部的问题，两种浏览器都需要不同。

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); 
}

以下是我的plunker链接：https://plnkr.co/edit/ecU8KvlO2jWGWy4jVAcS?p=preview