通过滑块改变div的颜色

效果图

需求：
如图所示，通过改变滑块的位置改变div的颜色

思路：

1. 通过设置span的left的范围控制滑块的运动范围
2. span的left值就是r g b的值（0-255）
3. 通过模板字符串改变div的background => rgb

CSS样式：

<style>
        * {
            padding: 0;
            margin: 0
        }

        ul {
            list-style: none
        }

        ul>li {
            width: 300px;
            height: 45px;
            position: relative;
            border: 1px solid aqua;
            margin: 10px;
        }

        ul>li>span {
            position: absolute;
            top: 0;
            left: 0;
            width: 45px;
            height: 45px;
            border-radius: 4px;
            background: rgb(10, 59, 59);
            cursor: pointer;
            user-select: none;
        }

        div {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc
        }
    </style>

HTML代码

 <ul>
        <li class="list1"><span></span></li>
        <li class="list2"><span></span></li>
        <li class="list3"><span></span></li>
    </ul>
    <div></div>

JS代码

<script>
        let spans = document.querySelectorAll('ul>li>span')

        for (let i = 0; i < spans.length; i++) {
            spans[i].onmousedown = function (evt) {
                var e = evt || window.event
                var leftD = spans[i].offsetLeft
                var mouseX = e.clientX
                window.onmousemove = function (evt) {
                    var x = evt.clientX
                    var chaX = x - mouseX
                    var left = leftD + chaX
                    // 设定left的范围
                    if (left < 0) { left = 0 }
                    if (left > 255) { left = 255 }
                    spans[i].style.left = left + 'px'
                }
                window.onmouseup = function (evt) {
                    window.onmousemove = null
                    window.onmouseup = null
                }
            }
        }
   
        setInterval(function () {
            var r = spans[0].offsetLeft
            var g = spans[1].offsetLeft
            var b = spans[2].offsetLeft
            var rgb = `rgb(${r},${g},${b})`
            var div = document.querySelector('div')
            div.style.background = rgb
        }, 16)

    </script>