HTML Javascript изменить изображение с шагом ползунка

Question

<input id="valR" type="range" min="0" max="100" value="0" step="5" oninput="showVal(this.value)" onchange="showVal(this.value)" />
    <span id="range">0</span>
    <img id="img">

<script>

    var val = document.getElementById("valR").value;
        document.getElementById("range").innerHTML=val;
        document.getElementById("img").src = val + ".jpg";
        function showVal(newVal){
          document.getElementById("range").innerHTML=newVal;
          document.getElementById("img").src = newVal+ ".jpg";
        }
</script>

Привет, люди, основываясь на этом коде, мне нужно иметь возможность загружать диапазон от 0 до 35, изображение между 35 - 65, другое изображение и 65 - 100, другое.

Большое спасибо за вашу помощь

Answer 1

Я добавил if(newVal >= 0 && newVal < 35) с двумя условиями, чтобы проверить, находится ли значение в диапазоне, а затем установил <img>

Вы не можете использовать document.getElementById("img").src = newVal+ ".jpg";, в этом случае вы получите 100 различных изображений

<input id="valR" type="range" min="0" max="100" value="0" step="5" oninput="showVal(this.value)" onchange="showVal(this.value)" />
    <span id="range">0</span>
    <img id="img">

<script>

    var val = document.getElementById("valR").value;
        document.getElementById("range").innerHTML=val;
        document.getElementById("img").src = val + ".jpg";
        function showVal(newVal){
          document.getElementById("range").innerHTML=newVal;
          if(newVal >= 0 && newVal < 35)
            document.getElementById("img").src = "first_image.jpg";
          else if(newVal >= 35 && newVal < 65)
            document.getElementById("img").src = "second_image.png";
          else if(newVal >= 35 && newVal < 65)
            document.getElementById("img").src = "third_image.png";
        }
</script>