Javascript 范围滑块基于值更改拇指背景图像

我有一个范围滑块，它的值从1到5。对于每个值，我希望滑块拇指更改为不同的图像

CSS:

HTML

基本上现在拇指背景图像设置为静态图像。例如，如果范围的值为2，我想将其更改为“coffee_cup2.png”，如果为5，则更改为“coffee_cup5.png”。基本上，我有5个不同的图像准备好了

我相信javascript是我们所需要的，但我不知道该怎么做

感谢您的帮助。

var slide=document.getElementById（'s-level'）；
slide.onchange=函数（）{
var imgArr=[{
瓦尔：1，
网址：'https://faviana.com/blog/wp-content/uploads/2017/04/cup-of-coffee-200x200.jpg'
}, {
瓦尔：2，
网址：'https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg'
}, {
瓦尔：3，
网址：'https://anti-aging.myblog.it/wp-content/uploads/sites/224035/2015/08/150824_coffee_beans.jpg'
}, {
瓦尔：4，
网址：'https://www.businessplantemplate.com/wp-content/uploads/2016/04/coffee-shop-200x200.jpg'
}, {
瓦尔：5，
网址：'https://fitsmallbusiness.com/wp-content/uploads/2017/04/CoffeePR-200x200.jpg'
}];
document.body.style.setProperty（“--dynamicImage”，“url（'”+imgar.filter（a=>a.Val==this.value）[0].url+“）”；
}

正文{
背景色：黑色；
--dynamicImage:url（“https://faviana.com/blog/wp-content/uploads/2017/04/cup-of-coffee-200x200.jpg");
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：5px；
边界半径：5px；
背景：#FFFFFF；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：100px；
高度：100px；
边界：0；
边界半径：50%；
背景图像：var（--dynamicImage）；
背景尺寸：包含；
背景位置：中心；
背景重复：无重复；
光标：指针；
}

这将有助于：

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #FFFFFF;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider:hover {
    opacity: 1;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 50%;
    background-image: url("{% static 'img/coffee_cup.png' %}");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.slider::-moz-range-thumb {
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 50%;
    background-image: url("{% static 'img/coffee_cup.png' %}");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

<input type="range" min="1" max="5" value="1" class="slider" id="roast-level">