const slider = document.getElementById('min-difference')

slider.addEventListener('input', function (event) {
  const table = document.getElementById('items')
  Array.from(table.children).forEach(row => {
    if (row.dataset.difference < Number(event.target.value)) {
      row.style.display = 'none'
    } else {
      row.style.display = 'table-row'
    }
  })

  document.getElementById('filter-value').innerText = event.target.value
})

document.addEventListener('scroll', function () {
  const gunner1 = document.getElementById('gunner1')
  const gunner2 = document.getElementById('gunner2')

  gunner1.style.transform = `translateX(${-window.scrollY}px)`
  gunner2.style.transform = `translateX(${window.scrollY}px)`

  gunner1.style.filter = `blur(${window.scrollY / 50}px)`
  gunner2.style.filter = `blur(${window.scrollY / 50}px)`
})