Javascript 如何用灰色标记html范围滑块（所有已选择的区域）？

我使用html、css、Bootstrap3、javascript/jquery。当用户增加滑块时，我想用与滑块背景色不同的颜色标记html范围滑块

.ios-range-slider {
    -webkit-appearance: none;
    border-radius: 10px;
    background-color: #C1C9C8;
    width: 100%;
}


input[type="range"]::-webkit-slider-thumb{
     -webkit-appearance: none;
    background-color: white;
    border-radius: 10px;
    width: 15px;
    height: 15px;    
}

---

一个非常简单的解决方案是使用jQuery

$(document).ready(function(){
    $(".ios-range-slider").change(function(){
        var val = $(this).val();
        $(this).css("background-color","rgb("+(val*10)+","+(val*10)+","+(val*10)+")");
    });
});

---

这是。

哦，不，不。我的意思是更改滑块拇指左侧的背景色。所以让我们假设游侠是（0-10），现在滑块拇指是5。滑块将左侧（0-5）涂成红色）让我们看看：滑块拇指左侧的滑块部分只会更改？