JSFiddle - React, Tailwind, and code Playground

HTML

<input name="sliderStatus" onchange="updateThumbnail(this)"  id="sliderStatus" type="range" min="0" max="100" value="0" step="10"/>


<div id="someImage0" style="display: block;">Showed image 1</div>
<div id="someImage10" style="display: block;">Showed image 2</div>
<div id="someImage20" style="display:  block;">Showed image 3</div>
<div id="someImage30" style="display:  block;">Showed image 4</div>
<div id="someImage40" style="display: none;">Showed image 5</div>
<div id="someImage50" style="display: none;">Showed image 6</div>
<div id="someImage60" style="display: none;">Showed image 7</div>
<div id="someImage70" style="display: none;">Showed image 8</div>
<div id="someImage80" style="display: none;">Showed image 9</div>
<div id="someImage90" style="display: none;">Showed image 10</div>
<div id="someImage100" style="display: none;">Showed image 11</div>

JavaScript

function updateThumbnail(rangeInput) {
    var previousImage = document.getElementById('someImage' + (rangeInput.value - 10));
    if(previousImage) {
        previousImage.style.display = 'none';
    }
    var nextImage = document.getElementById('someImage' + rangeInput.value);
    nextImage.style.display = 'block';
}