JSFiddle - React, Tailwind, and code Playground

HTML

<input id="pleer-volume" type="range" min="-666" max="215" value="10" step="0.1">

CSS

input#pleer-volume {
    -webkit-appearance: none;
    background: linear-gradient(to right, #778490 100%, #4d5d6e 100%);
    background-size: 100% 5px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
    outline: none;
    margin: auto;
    position: relative;
    top: 4px;
    width: 80px;
    margin-right: 9px;
}
input#pleer-volume::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:15px;background:#778490;position:relative;z-index:3;border:none!important;border-radius:30px;}
input#pleer-volume::-webkit-slider-thumb:after{content:" ";width:150px;height:10px;position:absolute;z-index:1;right:20px;top:5px;}

JavaScript

$('input#pleer-volume').on('input', function() {
  const
    $this = $(this),
    min = $this.attr('min'),
    val = ($this.val() - min) / ($this.attr('max') - min) * 100;

  $(this).css('background', `linear-gradient(to right, #2ecc71 ${val}%, #ececec ${val}%)`);
}).trigger('input');