CODEWITHSUNDEEP
javascripthtmlcsssliderrange
Sorin Burghiu
Sorin Burghiu

Reputation: 779

Range slider change thumb background image based on value

I have a range slider that has value from 1 to 5. For each value, i want the slider thumb to change to a different image.

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">

Basically right now the thumb background-image is set to a static image. I want to change it if for example the value of the range is 2 to "coffee_cup2.png" if 5 then to "coffee_cup5.png" basically i have 5 different images ready for this.

I believe javascript is what is needed but I am not sure how to go about that.

Any help appreciated.

Upvotes: 1

Views: 1056

Answers (1)

Cem
Cem

Reputation: 326

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;
}
<input type="range" min="1" max="5" value="1" class="slider" id="roast-level">

PS: IE does not accept this "filter" syntax you can use filter(function(a) { return a.Val == this.value; })[0].Url for IE support.

Upvotes: 1

Related Questions