<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>