JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" name="rangeInput" min="1" max="4" onchange="onSliderChange(this.value);">
<input id="um" type="button" value="1º Slide" onclick="toggleSlidetext('slideum')">
<div id="slideum">1º Slide</div>
<input id="dois" type="button" value="2º Slide" onclick="toggleSlidetext('slidedois')">
<div id="slidedois">2º Slide</div>
<input id="tres" type="button" value="3º Slide" onclick="toggleSlidetext('slidetres')">
<div id="slidetres">3º Slide</div>
<input id="quatro" type="button" value="4º Slide" onclick="toggleSlidetext('slidequatro')">
<div id="slidequatro">4º Slide</div>
<input id="cinco" type="button" value="5º Slide" onclick="toggleSlidetext('slidecinco')">
<div id="slidecinco">5º Slide</div>

CSS

/* Style Inicial dos Inputs Button */

#um {
    display: none;
}

#dois {
    display: none;
}

#tres {
    display: none;
}

#quatro {
    display: none;
}

#cinco {
    display: none;
}


/* Style Inicial das Div's dos Slides */

#slideum {
    display: none;
}

#slidedois {
    display: none;
}

#slidetres {
    display: none;
}

#slidequatro {
    display: none;
}

#slidecinco {
    display: none;
}

input[type="button"] {
    padding: 5px;
    background-color: #ccf;
}

JavaScript

var slides = Array.from(document.querySelectorAll('input[type="button"]'));
var slideTexts = Array.from(document.querySelectorAll('div'));

/* Dinâmica do Input Range */
function onSliderChange(val) {
    slides.forEach(function(slide, i) {
        slide.style.display = i <= val ? 'block' : 'none';
    });
    toggleSlidetext();
}

function toggleSlidetext(id) {
    var which = document.getElementById(id);
    slideTexts.forEach(function(div) {
        div.style.display = div == which ? 'block' : 'none';
    });
}