tl-dr/script.js

window.addEventListener("DOMContentLoaded", function () {
    var allAnnotations = this.document.querySelectorAll(".fn-annotatation");
    let level = 0;
    const updateShownAnnotations = () => {
        allAnnotations.forEach((el) => {
            const elLevel = parseInt(el.getAttribute("level"));
            console.log(elLevel, level);
            if (elLevel < level) {
                el.classList.add("visible");
            } else {
                el.classList.remove("visible");
            }
        })
    }

    updateShownAnnotations();
    document.getElementById("annotation").addEventListener("input", (e) => {
        level = Math.round(e.currentTarget.value / 100);
        updateShownAnnotations();



    })
})