利用JS的onchange事件拖动进度条变换背景颜色

废话不多说，上图        点击右侧进入  演示网页

大概思路是这样的，首先建立一个input框，然后type改成range,min="0"

,max="255" 即0到255表示黑到白的一个过程，并标注id="slider"。

然后把要修改的背景颜色的div或者body的id标注为changecolor。

最后用JS中的onchange事件函数将两个id连接起来，并注入事件。

不要忘了给进度条修改样式，因为不同的浏览器会有不同的样式，有的很好看，有的很复古。

代码如下

HTML

<div class="content" onmouseover="logos()" id="changecolor">
        <div class="content_title ">
            <h2><span>&ensp;&ensp;PREVIEW&ensp;&ensp;</span></h2>
        </div>
        <div class="slider">
            <span>&ensp;&ensp;CHANGECOLOR&ensp;&ensp;</span>
            <input type="range" id="slider" min="0" max="255" value="">
        </div>

</div>
//给父级div改变颜色

css

#slider {
    -webkit-appearance: none;
    position: relative;
    outline: none;
    background: none;
}

#slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: rgb(253, 61, 39);
    border-radius: 50%;
}

JS

var slider = document.getElementById("slider")
        slider.onchange = function() {
            var val = this.value;
            var changecolor = document.getElementById("changecolor");
            changecolor.style.backgroundColor = "rgb(" + val + "," + val + "," + val + ")";
        }

TIPS：当rgb所对应的每个数值都相同时，则是灰色。