<input type="range" id="myRange">
<div id='value'>50</div>
<div class='some-div' max-val='11'>11</div>
<div class='some-div' max-val='30'>30</div>
<div class='some-div' max-val='40'>40</div>
<div class='some-div hidden' max-val='80'>80</div>
<div class='some-div hidden' max-val='90'>90</div>
<div class='some-div' max-val='35'>35</div>
<div class='some-div hidden' max-val='55'>55</div>.some-div{
background-color:green;
margin:5px;
padding:3px;
color:white;
width:200px;
}
.hidden{
display : none;
}$("body").on("change", "#myRange", function() {
var currentVal = Number($(this).val());
$("#value").html(currentVal);
$(".some-div").each(function() {
var element = $(this);
var maxVal = Number(element.attr("max-val"));
if (currentVal > maxVal) {
element.addClass("hidden");
} else {
element.removeClass("hidden");
}
});
});
External CSS
This Pen doesn't use any external CSS resources.