Esse código pode ser **muito** reduzido... tem imensa repetição aí. Sugestão (com ligeiras modificações no HTML `->` ver exemplo em baixo): 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'; }); } ### Explicação: A ideia é colocar os elementos em questão em memória. `slides` e `slideTexts` é isso mesmo, arrais com ponteiros para os elementos. Quando `onSliderChange` fôr chamado, percorre todos os `slides` e compara o index (`i`) com o `val` que lhe é passado. Depois chama `toggleSlidetext` sem nenhum valor, para esconder todos. A lógica de `toggleSlidetext` é semelhante. Percorre todos os elementos e compara se o `div` a ser iterado é o mesmo que `which`. Também podiamos comparar assim: div.style.display = div.id == id ? 'block' : 'none'; e dispensar a lógica do `which`. ### Exemplo: https://jsfiddle.net/un3gkrvv/ <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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'; }); } <!-- language: lang-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; } <!-- language: lang-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> <!-- end snippet -->