为什么range表单绑定onchange后，第一次事件触发赋值成功，随后事件触发赋值失败？

Question

<div class="a">    <img src="图片图片图片.jpg" alt="JOJO"></div><div class="b">    <div class="b1">        <span>色相</span>        <input type="range" min="0" max="359" step="1" class="b11">        <input type="checkbox">    </div>    <div class="b1">        <span>饱和度</span>        <input type="range" min="0" max="100" step="1" class="b11">        <input type="checkbox">    </div>    <div class="b1">        <span>亮度</span>        <input type="range" min="0" max="100" step="1" class="b11">        <input type="checkbox">    </div></div><style>    .a{        width: 500px;        height: 500px;        border: 5px inset #aaa;        margin: 50px;        margin-left: 150px;        position: relative;        display: inline-block;    }    .a>img{        max-width: 500px;        position: absolute;        top: 0;        right: 0;        bottom: 0;        left: 0;        margin: auto;    }    .b{        float: right;        margin: 50px;        margin-right: 150px;    }    .b1>span{        display: block;    }</style><script>    var pictureNode = document.querySelector(".a").firstElementChild;    var slideBoxNode = document.querySelectorAll(".b1");    function bindInput() {        var i = 0;        var hueRotate = "hue-rotate(" + document.querySelectorAll(".b11")[0].value + "deg)";        var saturate = "saturate(" + document.querySelectorAll(".b11")[1].value + "%)";        var brightness = "brightness(" + document.querySelectorAll(".b11")[2].value + "%)";        var slideNode = 0;        for(;i<slideBoxNode.length;i++){            slideNode = document.querySelectorAll(".b11")[i];            slideNode.addEventListener("change", function () {                return (function () {                    pictureNode.style.filter = hueRotate + " " + saturate + " " + brightness;                    console.log(pictureNode.style.filter);                })(i);            });        }    }    window.bindInput();</script>