Question

我有一个范围滑块，其值从1到5。对于每个值，我希望滑块将其更改为其他图像。

CSS：

.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;
}

HTML

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

基本上现在，拇指背景图像设置为静态图像。我想更改它，例如，如果范围的值是2到“ coffee_cup2.png”，如果范围是5，则到“ coffee_cup5.png”，基本上我已经为此准备了5张不同的图像。

我相信需要使用javascript，但是我不确定该怎么做。

任何帮助表示赞赏。

Answer 1

select i.name,
       i.name_time_interval - coalesce(o.total_overlap_interval, interval '0') as duration
  from island_times i
  left join overlap_time o
    on o.name = i.name
;

 name | duration 
------+----------
 B    | 02:00:00
 A    | 03:30:00
(2 rows)

var slide = document.getElementById('roast-level');
slide.onchange = function() {
  var imgArr = [{
    Val: 1,
    Url: 'https://faviana.com/blog/wp-content/uploads/2017/04/cup-of-coffee-200x200.jpg'
  }, {
    Val: 2,
    Url: 'https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg'
  }, {
    Val: 3,
    Url: 'https://anti-aging.myblog.it/wp-content/uploads/sites/224035/2015/08/150824_coffee_beans.jpg'
  }, {
    Val: 4,
    Url: 'https://www.businessplantemplate.com/wp-content/uploads/2016/04/coffee-shop-200x200.jpg'
  }, {
    Val: 5,
    Url: 'https://fitsmallbusiness.com/wp-content/uploads/2017/04/CoffeePR-200x200.jpg'
  }];
  document.body.style.setProperty("--dynamicImage", "url('" + imgArr.filter(a => a.Val == this.value)[0].Url + "')");
}

body {
  background-color: black;
  --dynamicImage: url("https://faviana.com/blog/wp-content/uploads/2017/04/cup-of-coffee-200x200.jpg");
}
.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: var(--dynamicImage);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

PS：IE不接受您可以使用<input type="range" min="1" max="5" value="1" class="slider" id="roast-level">来支持IE的“过滤器” 语法。

范围滑块根据值更改拇指背景图像

1 个答案: