How to solve the cross browser compatibility for the input range slider?

Question

I used customized range slider with css, here I am facing problem with slider track. In mozilla I used selector for progress (-moz-range-progress) and for IE -ms-filler-lower and -ms-filler-upper.

So, it is working fine for the both browsers. But I am unable to find the solution for Chrome by using webkit, so I can't change the color of the track based on the position of the slider thumb.

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;


}
.gray-line {

  position: absolute;
  height: 2px;
  background-color: grey;
  top: 17px;
  width: 20px;

}

.text-size-slider .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: linear-gradient(90deg, red, brown) 0 100% no-repeat content-box;
  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); 
}
.text-size-slider .slider:-webkit-fill-lower {  

  background-color: blue;

}

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

Expected result:

Answer 1

Okay, i was pretty interested on this as well so i did some research, unfortunately there is no equivalent css property to achieve the same behavior.

I had the idea of adding an ::after element on the ::-webkit-slider-thumb, but Chrome won't let you do this, there is an issue opened on Chronium but they have closed it with a "won't fix" status, because they did mean to remove that feature (or bug?) that was once there.

Now what can you do that doesn't involve JS?

As suggested on this question you could:

Pure CSS solution:

Chrome: Hide the overflow from input[range], and fill all the space left to thumb with shadow color.

IE: no need to reinvent the wheel: ::-ms-fill-lower

Firefox no need to reinvent the wheel: ::-moz-range-progress

The answer applied to your code will add something like this:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
      overflow: hidden;
      background-color: #9a905d;
    }
  .text-size-slider .slider::-webkit-slider-thumb {
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    background-color: blue;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 80px 0 0 80px gray;
    margin-top: -6px;
  }

}

However you will see that the slider ::thumb is no longer round but just as tall as the slider's height, that is because this solution relies on hiding the input's overflow and adding a box-shadow to the right that expands to the same width of the input, that is how you achieve two different colors on each side, unfortunately this also hides your ::thumb on the Y-axis.

This is when you start thinking about adding an ::after pseudo element, but as i mentioned before, it won't work.

So what now? well, use JS. In the same question linked above there is a JS solution that i have updated to make it more responsive.