title: DIV Element Show/Hide via RangeSlider
body: <p>I want to show and hide some DIV elements with range. Each DIV element has a specific percentage value.</p>
  <p>If the range is set to 70, the values of the DIV elements are checked and those with levels 70 and above are displayed. Those who are 70 and below are hidden.</p>
  <p>But this code structure does not serve it and I am not able to resolve the error.</p>
  <p><strong>HTML:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;similarQuestionFrame&quot; data-similar-question-percentage-value=&quot;50&quot;&gt;...&lt;/div&gt;
  &lt;div class=&quot;similarQuestionFrame&quot; data-similar-question-percentage-value=&quot;100&quot;&gt;...&lt;/div&gt;
  &lt;div class=&quot;similarQuestionFrame&quot; data-similar-question-percentage-value=&quot;76&quot;&gt;...&lt;/div&gt;
  &lt;div class=&quot;similarQuestionFrame&quot; data-similar-question-percentage-value=&quot;81&quot;&gt;...&lt;/div&gt;
  </code></pre>
  <p><strong>JAVASCRIPT:</strong></p>
  <pre class="lang-js prettyprint-override"><code>let range = document.getElementById(&quot;similarQuestionFilterInput&quot;);
  
  let similarQuestionsPercentageFilter = () =&gt; {
    range.onchange = similarQuestionsPercentageFilter;
    
    $(&quot;.similarQuestionFrame&quot;).each(function() {
      if ($(this).attr('data-similar-question-percentage-value') &gt;= range.value) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
    
    console.log(range.value);
  }
  </code></pre>