0

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?

Kirill
  • 207
  • 1
  • 4
  • 14
  • Can you post some your code to understand what actually is not working? Here is a [great answer about showing/hiding elements](https://stackoverflow.com/a/21070237/4222181) in general without using any libs. – Stanislav Kvitash Jun 01 '17 at 12:41
  • I created a Fiddle - https://jsfiddle.net/kpanyushin/9h6gk7s6/ – Kirill Jun 01 '17 at 17:13
  • when input's value is less then span's value, div.block should be hidden. How can I do this? – Kirill Jun 01 '17 at 17:14

1 Answers1

0

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

JonLuca
  • 850
  • 6
  • 25