Take Range button value and run function in real time

Question

I need that in javascript pure and in real time the same value is picked up and depending on it (if it is 1, 2, 3, 4, 5) only the corresponding div appears!

var inputvar = document.getElementById("numerodemqs_input"),
  number_mqs = document.getElementById("resultado1");
inputvar.addEventListener("input", function() {
  number_mqs.innerHTML = inputvar.value;
}, false);

/* Para deixar algo invisível */
function displayNone(NoneId) {
    document.getElementById(NoneId).style.display = "none";
  }
  /* Para deixar algo visível */

function displayBlock(BlockId) {
  document.getElementById(BlockId).style.display = "block";
}

 <h4>Quantas Media Queries o Header Est&aacute;tico possui?</h4>
<input id="numerodemqs_input" type="range" min="1" max="5" value="">
<h5 id="resultado1"></h5>
<div id="1">
  <h4>Este é para o 1.</h4>
</div>
<div id="2">
  <h4>Este é para o 2.</h4>
</div>
<div id="3">
  <h4>Este é para o 3.</h4>
</div>
<div id="4">
  <h4>Este é para o 4.</h4>
</div>
<div id="5">
  <h4>Este é para o 5.</h4>
</div>

Answer 1

I changed the logic of your script a little bit, working with name to take the elements that are part of your set, and assigning a data-* to store the value of div.

Solution 1:

var inputvar = document.getElementById("numerodemqs_input"),
number_mqs = document.getElementById("resultado1");

inputvar.addEventListener("input", function() {
  number_mqs.innerHTML = inputvar.value;
  /* Linha 1 */ var elementos = document.getElementsByName("div");
  /* Linha 2 */ for (i = 0; i < elementos.length; i++) {
    /* Linha 3 */ value_element = elementos[i].getAttribute('data-value');
    /* Linha 4 */ if (value_element == inputvar.value) {
      displayBlock(elementos[i]);
    } else {
      displayNone(elementos[i]);
    }
  }
}, false);

/* Para deixar algo invisível */
function displayNone(element) {
    element.style.display = "none";
  }
  /* Para deixar algo visível */

function displayBlock(element) {
  element.style.display = "block";
}

<h4>Quantas Media Queries o Header Est&aacute;tico possui?</h4>
<input id="numerodemqs_input" type="range" min="1" max="5" value="">
<h5 id="resultado1"></h5>
<div name="div" data-value="1">
  <h4>Este é para o 1.</h4>
</div>
<div name="div" data-value="2">
  <h4>Este é para o 2.</h4>
</div>
<div name="div" data-value="3">
  <h4>Este é para o 3.</h4>
</div>
<div name="div" data-value="4">
  <h4>Este é para o 4.</h4>
</div>
<div name="div" data-value="5">
  <h4>Este é para o 5.</h4>
</div>

Explanation of the above code:

Line 1: I take all the elements* inside the form they have determined name that I set, in case div, and play within a array;

Line 2: Executing a for to iterate on top of each element inside of array, elementos.length tells me the amount of elements that the array possesses;

Line 3: I take the value inside the attribute data-value of element;

Row 4: I check the element value input is the same value as current gap element, if it is, is why the element should be displayed, then I send his reference to your function, if it’s not, it’s because should not be displayed;

*Note: I’m taking the element reference, not the id, or other attribute, so it is easier to change it if it is necessary.

Remembering the attributes of the type data-* are a new implementation of html5, then for some older browsers, or mobile devices may not have support, see a more complete list here, maybe a better solution (cross-browsing) was a mix of what was done, only catching the id of the elements by the attribute name and with the id whether or not to block the view.

---

Solution 2:

var inputvar = document.getElementById("numerodemqs_input"),
number_mqs = document.getElementById("resultado1");

inputvar.addEventListener("input", function() {
  number_mqs.innerHTML = inputvar.value;
  var elementos = document.getElementsByName("div");
  for (i = 0; i < elementos.length; i++) {
    value_element = elementos[i].getAttribute('id');
    if (value_element == inputvar.value) {
      displayBlock(elementos[i]);
    } else {
      displayNone(elementos[i]);
    }
  }
}, false);

/* Para deixar algo invisível */
function displayNone(element) {
    element.style.display = "none";
  }
  /* Para deixar algo visível */

function displayBlock(element) {
  element.style.display = "block";
}

<h4>Quantas Media Queries o Header Est&aacute;tico possui?</h4>
<input id="numerodemqs_input" type="range" min="1" max="5" value="">
<h5 id="resultado1"></h5>
<div id="1" name="div">
  <h4>Este é para o 1.</h4>
</div>
<div id="2" name="div">
  <h4>Este é para o 2.</h4>
</div>
<div id="3" name="div">
  <h4>Este é para o 3.</h4>
</div>
<div id="4" name="div">
  <h4>Este é para o 4.</h4>
</div>
<div id="5" name="div">
  <h4>Este é para o 5.</h4>
</div>

Explanation of the above code:

The code is similar to the previous one except for the attribute you use to reference the correct element, instead of using an attribute of type data-*, I use the id.