CodePen Embed - Range Slider + image&content change when slide

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />

<div class="levels">
  <img src="https://uploads-ssl.webflow.com/5ed8171611a0683a250e530b/5f1c851e4bf7d44408c1af0a_ranger__lamp--bgtrans.png" height="80px" id="levelOne" class="animated rubberBand" alt="Level Tiers" />
  <img src="https://uploads-ssl.webflow.com/5ed8171611a0683a250e530b/5f1c851edb81f1e5f792c383_ranger___chair--bgtrans.png" height="100px" id="levelTwo" class="animated rubberBand hidden" alt="Level Tiers" />
  <img src="https://uploads-ssl.webflow.com/5ed8171611a0683a250e530b/5f1c851ea807cd0847c55057_ranger__table--bgtrans.png" height="120px" id="levelThree" class="animated rubberBand hidden" alt="Level Tiers" />
  <img src=" https://uploads-ssl.webflow.com/5ed8171611a0683a250e530b/5f1c851e2968087591875f6f_ranger__storage--bgtrans.png" height="140px" id="levelFour" class="animated rubberBand hidden" alt="Level Tiers" />
  <img src="https://uploads-ssl.webflow.com/5ed8171611a0683a250e530b/5f1c851e8114815102669f40_ranger__bed--bgtrans.png" height="160px" id="levelFive" class="animated rubberBand hidden" alt="Level Tiers" />
  <img src=" https://uploads-ssl.webflow.com/5ed8171611a0683a250e530b/5f1c851e1f096619db209606_ranger__sofa--bgtrans.png" height="180px" id="levelSix" class="animated rubberBand hidden" alt="Level Tiers" />

<div class="data">
  <span id="landfill">1000</span><span id="grams">g</span>
 </div>
  <div class="slidecontainer">
  <input type="range" min="0" max="50" value="0" step="10" class="slider" id="myRange"/>
    <div class="end-cube"></div>
</div>
</div>

/* origianl code from https://www.youtube.com/watch?v=pdtYsnrwrKw*/

.levels {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #fffcf9;
  flex-direction: column;
}

.levels img {
  z-index: 1;
}

.hidden {
  display: none;
}

.slidecontainer {
  width:60%;
  position: absolute;
  justify-content: center;
  top: 280px;
  z-index: 1;
}

.data {
  position: absolute;
  color: transparent;
  font-family: "Merriweather", serif;
  font-size: 20vw;
  -webkit-text-fill-color: none; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #f7c0ce;
  z-index: 0;
}

#grams {
  font-size: 5vw;
}

/* The slider itself */
.slider{
  -webkit-appearance: none;
  width: 250px;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;

}
.slidecontainer{  
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}
.number {
  font-size: 2em;
  background: red;
}
/* Mouse-over effects */
.slidecontainer:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

.end-cube{
  position: absolute;
  width: 20px;
  height:20px;
  border: solid #1C1AA9 5px;
  background: #FFDD02;
  z-index:0;
  top:25px;
  right:-5px;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
/*.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4f5354;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #bfc0c1;
  cursor: pointer;
}
*/
input[type=range].slider {
  width: 100%;
  margin: 35.8px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range].slider:focus {
  outline: none;
}
input[type=range].slider::-webkit-slider-runnable-track {
  background: #1c1aa9;
  border: 0.2px solid rgba(1, 1, 0, 0);
  border-radius: 1.3px;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
input[type=range].slider::-webkit-slider-thumb {
  margin-top: -80px;
  width: 150px;
  height: 150px;
  background: url('https://uploads-ssl.webflow.com/5ed8171611a0683a250e530b/5f1c8a6c9bfb9a4d8b8d1c3e_Slider.png');
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-transition: -webkit-transform .5s ease-in-out;
    -ms-transition: -ms-transform .5s ease-in-out;
    transition: transform .5s ease-in-out; 
}

input[type=range].slider::-webkit-slider-thumb:hover{
  transform:rotate(45deg);
}

input[type=range].slider:focus::-webkit-slider-runnable-track {
  background: #1c1aa9;
}
input[type=range].slider::-moz-range-track {
  background: #1c1aa9;
  border: 0.2px solid rgba(1, 1, 0, 0);
  border-radius: 1.3px;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
input[type=range].slider::-moz-range-thumb {
  width: 80px;
  height: 80px;
  background: #35c18b;
  border: 5px solid #1c1aa9;
  cursor: pointer;
}
input[type=range].slider::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 36.8px 0;
  color: transparent;
  width: 100%;
  height: 8.4px;
  cursor: pointer;
}
input[type=range].slider::-ms-fill-lower {
  background: #1c1aa9;
  border: 0.2px solid rgba(1, 1, 0, 0);
  border-radius: 2.6px;
}
input[type=range].slider::-ms-fill-upper {
  background: #1c1aa9;
  border: 0.2px solid rgba(1, 1, 0, 0);
  border-radius: 2.6px;
}
input[type=range].slider::-ms-thumb {
  width: 80px;
  height: 80px;
  background: #35c18b;
  border: 5px solid #1c1aa9;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range].slider:focus::-ms-fill-lower {
  background: #1c1aa9;
}
input[type=range].slider:focus::-ms-fill-upper {
  background: #1c1aa9;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range].slider {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

@media screen and (max-width: 480px){
  
  .levels img{transform:scale(0.8);}
  
  input[type=range].slider {
    width: 100%;
  }
  
  input[type=range].slider::-webkit-slider-thumb{
    transform:scale(0.6);
  }
  input[type=range].slider::-webkit-slider-thumb：hover{
    transform:none;
  }
  
  .end-cube{
    transform:scale(0.6);
    top:28px;
  }
  #landfill{
    font-size: 30vw;
  }
  }

var slider = document.getElementById("myRange");
var levelOne = document.getElementById("levelOne");
var levelTwo = document.getElementById("levelTwo");
var levelThree = document.getElementById("levelThree");
var levelFour = document.getElementById("levelFour");
var levelFive = document.getElementById("levelFive");
var levelSix = document.getElementById("levelSix");
var landfill = document.getElementById("landfill");
slider.oninput = function () {
  if (this.value == 0) {
    levelOne.classList.remove("hidden");
    levelTwo.classList.add("hidden");
    levelThree.classList.add("hidden");
    levelFour.classList.add("hidden");
    levelFive.classList.add("hidden");
    levelSix.classList.add("hidden");
    landfill.textContent = "1000";
  } else if (this.value == 10) {
    levelOne.classList.add("hidden");
    levelTwo.classList.remove("hidden");
    levelThree.classList.add("hidden");
    levelFour.classList.add("hidden");
    levelFive.classList.add("hidden");
    levelSix.classList.add("hidden");
    landfill.textContent = "4000";
  } else if (this.value == 20) {
    levelOne.classList.add("hidden");
    levelTwo.classList.add("hidden");
    levelThree.classList.remove("hidden");
    levelFour.classList.add("hidden");
    levelFive.classList.add("hidden");
    levelSix.classList.add("hidden");
    landfill.textContent = "32000";
  } else if (this.value == 30) {
    levelOne.classList.add("hidden");
    levelTwo.classList.add("hidden");
    levelThree.classList.add("hidden");
    levelFour.classList.remove("hidden");
    levelFive.classList.add("hidden");
    levelSix.classList.add("hidden");
    landfill.textContent = "33000";
  } else if (this.value == 40) {
    levelOne.classList.add("hidden");
    levelTwo.classList.add("hidden");
    levelThree.classList.add("hidden");
    levelFour.classList.add("hidden");
    levelFive.classList.remove("hidden");
    levelSix.classList.add("hidden");
    landfill.textContent = "40500";
  } else if (this.value == 50) {
    levelOne.classList.add("hidden");
    levelTwo.classList.add("hidden");
    levelThree.classList.add("hidden");
    levelFour.classList.add("hidden");
    levelFive.classList.add("hidden");
    levelSix.classList.remove("hidden");
    landfill.textContent = "129000";
  }
};

function outputUpdate(num) {
  document.querySelector("#landfill").value = num;
}

//next time try //https://stackoverflow.com/questions/43261985/jquery-range-slider-with-image-swap

This Pen is owned by Tanzyingsz on CodePen.

See more by @tanzyingsz on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.