如何更改範圍滑塊的軌道顏色？

Question

我必須改變範圍滑塊的軌道顏色，我嘗試過使用css，但是在chrome中它不工作，最後我找到了一個使用jquery（link）的解決方案，所以我實現了，但沒有得到預期的輸出。

的Jquery：

$('.text-size-slider .slider').change(function() { 
     var val = ($(this).val() - $(this).attr('min'))/($(this).attr('max') - $(this).attr('min')); 

     $(this).css('background-image', 
        '-webkit-gradient(linear, left top, right top, ' 
        + 'color-stop(' + val + ', #94A14E), ' 
        + 'color-stop(' + val + ', #C5C5C5)' 
        + ')' 
       ); 
    }); 

這裏是我的plunker： https://plnkr.co/edit/yMg8bKSrbam6RmtgdBl4?p=preview

是否有可能與純JavaScript或angularjs不使用jQuery，jQuery的也作爲plunker表明，它不能正常工作。

預期輸出：

任何幫助，將不勝感激。 請任何人幫我。我嘗試了很多，但無法得到它。

Answer 1

我已經更新了你的指令，你可以在這個plunker

"https://plnkr.co/edit/UPh0guqcXxO6ivSljh8R?p=preview" 

Answer 2

替換的style.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: 0px 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: 18px; 
    height: 18px; 
    border-radius: 50%; 
    margin-top: -6px; 
} 
.text-size-slider .slider::-ms-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:red !important; 
height:20px; 
width:20px; 
position:absolute; 
top:-20px; 
left:-10px; 
} 
.text-size-slider .slider::-webkit-slider-thumb::after { 
content:"YEAH"; 
display:block; 
background:green !important; 
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: -39px; 
    margin-left:14px; 

    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; 

    border: 0; 
} 
.text-size-slider .slider::-ms-track { 
    width: 100%; 
    height: 2px; 
    cursor: pointer; 
    background: yellow; 
    border: 0; 
} 
.text-size-slider .slider::-moz-range-track { 
    width: 100%; 
    height: 2px; 
    cursor: pointer; 
    background-color: #ddd; 
    border: 0; 
} 
.text-size-slider .slider::-moz-range-progress { 
    background-color: rgba(192, 35, 74, 1); 
    height: 2px; 
} 
.text-size-slider .slider::-webkit-progress-value { 
    background-color: orange; 
}{ 
    background-color: rgba(192, 35, 74, 1); 
} 
@-moz-document url-prefix() { .pointer { top: -40px; } } 

.text-size-slider .slider::-ms-fill-lower { 
    background: yellow; 
    border-radius: 0; 
    } 

    .text-size-slider .slider::-ms-fill-upper { 
    background: black; 
    border-radius: 0; 
    } 
.text-size-slider .slider{ 
    -webkit-appearance: none; 
    -moz-apperance: none; 
    /*! border-radius: 6px; */ 
    height: 0px; 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0.15, #ddd), color-stop(0.15, #ddd)); 
} 

.text-size-slider .slider::-webkit-slider-thumb { 
    -webkit-appearance: none !important; 
    background-color: #E9E9E9; 
    border: 1px solid #CECECE; 
    height: 15px; 
    width: 15px; 
}