如何在JavaScript中更改滑块的拇指的背景颜色？

Question

我很难使用JavaScript更改滑块的拇指的背景颜色。我还尝试了stackoverflow“通过JavaScript更改CSS伪元素样式”中已经给出的答案，但它对我不起作用。基本上，我只想使用JavaScript更改拇指的颜色。谁能帮我。

html

<input type="range" class="slider-range" id="range" value="7" name="range" min="1" step="1" max="7" >

CSS

.slider-range::-webkit-slider-thumb {
    -webkit-appearance: none;

    background-color:#B49556;

}

JavaScript

document.getElementById("range").classList.add('slider-range::-webkit-slider-thumb{background-color:yellow}');