初衷
制作一个针对视觉的产品，快速调出想要的颜色，然后写在给前端程序员的文档里，方便前端程序员进行页面的配色处理[滑稽]
什么是range
在html中有一个<input>的标签，通过在input中的type属性来控制输入框的类型。
其中有一个type="range"的range类型，可以实现滑动取值的效果。
效果图
range的值
一个小实验
实现了一个range的滚动条之后，我们先做个小实验，通过js获取一下他的value，看看是什么呢？
<!DOCTYPE html>
<html>
<head>
<title>range演示</title>
<meta charset="utf-8">
</head>
<body>
<input type="range" id="range">
</body>
<script>
let range = document.getElementById('range');
let flag = false;
range.addEventListener('mousedown',()=>{
range.addEventListener('mouseup',()=>{
console.log(document.getElementById('range').value);
})
})
</script>
</html>上面代码我首先设置了在html代码中写了一个range的滑动条，并为他赋予了一个id---range。
然后在JavaScript中首先通过document.getElementById获取这个id，然后为他绑定了一个鼠标按下的事件，当鼠标按下后，抬起的的时候会触发绑定的第二个事件，同时在控制台中打印出value。
如图
那么读者可能会说，为什么不能只绑定一个mousedown的事件，然后鼠标按下再获取range的值呢？
答案是：
mousedown是鼠标按下的时候就会触发，想象一下，假如此时range的小圆球在中部的位置，如果用户把他拖拽到80的位置，那么拖动之后，当用户鼠标按下的第一时间，50的值就会获取到，而用户真正期待的值，80是在下一次拖动的时候才能获取到，但是如果用户下一次要拖动，那么极大几率他并不想获取80的值了，也就是说，我们期望是用户鼠标摁下时开始检测，但只有鼠标抬起时，range条的位置才是我们最终要关注的值，所以我这边是采取了外层绑定一个mousedown事件触发的条件，在内部又绑定了一个mouseup的事件触发条件。
控制range的value的范围
value的范围，默认的是0-100，但是因为我们要制作的rgba()函数的参数是0-255，所以我们可以通过在<input type="range" id="range">中设置min和max的值来控制其value的范围
方案如下：
<input type="range" id="range" min="0" max="255">
分别为rgba的四个参数进行绑定
let range1 = document.getElementById('range1');
let range2 = document.getElementById('range2');
let range3 = document.getElementById('range3');
let range4 = document.getElementById('range4');
range1.addEventListener('mousedown',()=>{
range1.addEventListener('mouseup',()=>{
console.log(range1.value);
})
})
range2.addEventListener('mousemove',()=>{
range2.addEventListener('mouseup',()=>{
console.log(range2.value);
})
})
range3.addEventListener('mousedown',()=>{
range3.addEventListener('mouseup',()=>{
console.log(range3.value);
})
})
range4.addEventListener('mousedown',()=>{
range4.addEventListener('mouseup',()=>{
console.log(range4.value);
})
})分别为四个range条进行绑定，通过移动range来改变值
改变div区域颜色的JavaScript函数
function change(){
let divColor = document.getElementById('div');
divColor.style.backgroundColor = `rgba(${range1.value},${range2.value},${range3.value},${range4.value / 100})`
}首先获取div区域的id，然后通过divColor.style.backgroundColor改变背景色，实现滑动改变颜色的效果。
初版本全部代码
<!DOCTYPE html>
<html>
<head>
<title>range演示</title>
<meta charset="utf-8">
<style>
.div{
position: absolute;
width: 800px;
height: 600px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
[type="range"]{
margin-right: 200px;
}
</style>
</head>
<body>
red:<input type="range" id="range1" min="0" max="255">
green:<input type="range" id="range2" min="0" max="255">
blue:<input type="range" id="range3" min="0" max="255">
alpha:<input type="range" id="range4" min="0" max="100">
<div class="div" id="div"></div>
</body>
<script>
function change(){
let divColor = document.getElementById('div');
divColor.style.backgroundColor = `rgba(${range1.value},${range2.value},${range3.value},${range4.value / 100})`
}
let range1 = document.getElementById('range1');
let range2 = document.getElementById('range2');
let range3 = document.getElementById('range3');
let range4 = document.getElementById('range4');
range1.addEventListener('mousedown',()=>{
range1.addEventListener('mouseup',()=>{
console.log(range1.value);
change();
})
})
range2.addEventListener('mousemove',()=>{
range2.addEventListener('mouseup',()=>{
console.log(range2.value);
change();
})
})
range3.addEventListener('mousedown',()=>{
range3.addEventListener('mouseup',()=>{
console.log(range3.value);
change();
})
})
range4.addEventListener('mousedown',()=>{
range4.addEventListener('mouseup',()=>{
console.log(range4.value);
change();
})
})
</script>
</html>不足和优化----最终解决的版本
我们上面虽然完成了通过滚动条改变颜色的效果，但是我们发现，上述我们完成的demo有一些缺陷，即：只有滑动之后，鼠标松开，才能看到渲染的效果，中途的改变无法发现，不能很好的很直观的进行观察。
为了解决这个问题，我采取了通过mousemove来替换mousedown嵌套mouseup的方法。addEventListener()内调用change()函数。完成动态渲染改变页面颜色。
最终解决版本如下:
<!DOCTYPE html>
<html>
<head>
<title>range演示</title>
<meta charset="utf-8">
<style>
.div{
position: absolute;
width: 800px;
height: 600px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
[type="range"]{
margin-right: 200px;
}
</style>
</head>
<body>
red:<input type="range" id="range1" min="0" max="255">
green:<input type="range" id="range2" min="0" max="255">
blue:<input type="range" id="range3" min="0" max="255">
alpha:<input type="range" id="range4" min="0" max="100">
<div class="div" id="div"></div>
</body>
<script>
function change(){
let divColor = document.getElementById('div');
divColor.style.backgroundColor = `rgba(${range1.value},${range2.value},${range3.value},${range4.value / 100})`
}
let range1 = document.getElementById('range1');
let range2 = document.getElementById('range2');
let range3 = document.getElementById('range3');
let range4 = document.getElementById('range4');
range1.addEventListener('mousemove',()=>{
change();
})
range2.addEventListener('mousemove',()=>{
change();
})
range3.addEventListener('mousemove',()=>{
change();
})
range4.addEventListener('mousemove',()=>{
change();
})
</script>
</html>最后完成。
