根据输入值显示或隐藏div

Question

I have an input[type=range], user can select a value (for example, from 0 to 1000), this is kinda price filter, also I have several divs each one with it's own pricevalue. I need div to be shown or hide depending on input values. How to do this with VanillaJS?

Answer 1

Is this hardcoded, or are they dynamic divs? Have you tried just getting the value of the input and hiding the divs that are required?

if(input.val < 1000){
    var divToHide = document.getElementById("priceMid");
    divToHide.style.display = 'none';           // Hide
} 

if you have multiple divs, give each one their own attribute with the value, and then you can iterate over them and only hide the ones above/below a certain value. This answer has more in detail Show/hide 'div' using JavaScript