为什么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>