滑块生成颜色

Question

请编写一个颜色选择的插件。如下图

要求：

1. 页面包含三个滑动条

2. 每个滑动条的范围，都是从0 ~ 255

3. 在拖拽滑动条时，可分别控制右边方块的RGB颜色

Answer 1

.box{
  width: 100px;
  height: 100px;
  background: rgb(0,0,0);
}

 <input type="range" max="255" step="1" min="0" name="" id="" value="0" />
 <input type="range" max="255" step="1" min="0" name="" id="" value="0" />
 <input type="range" max="255" step="1" min="0" name="" id="" value="0" />

var inputs = document.getElementsByTagName('input'),
    box = document.getElementsByClassName('box')[0];
for (var i=0;i<inputs.length;i++) {
    inputs[i].onchange = function(){
      box.style.background = "rgb("+inputs[0].value+","+inputs[1].value+","+inputs[2].value+")";
    }
}

Answer 2

h5代码

<h3>RGB</h3>
<div style="margin-left: 20px;">
    <img id="rgb" style="width: 100px;height: 100px;background: black;margin-left: 100px;">
    <br>
    <label id="label" style="margin-left: 20px;">R:0, G:0, B:0</label>
    <div style="margin-top: 10px;">
        <label style="color: red;">R</label>
        <input class="slider" type="range" name="points" min="0" max="255" value="0"/>
    </div>
    <div style="margin-top: 10px;">
        <label style="color: green;">G</label>
        <input class="slider" type="range" name="points" min="0" max="255" value="0"/>
    </div>
    <div style="margin-top: 10px;">
        <label style="color: blue;">B</label>
        <input class="slider" type="range" name="points" min="0" max="255" value="0"/>
    </div>
</div>

js代码如下：(注：之前本人写的有点笨，参照了上一位回答者的js代码，在这里引用，谢谢)

<script type="text/javascript">
    var inputs = document.getElementsByTagName('input'),
        label = document.getElementById('label'),
        img = document.getElementById('rgb');

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onchange = function () {
            label.innerHTML = "R: " + inputs[0].value +", G: " + inputs[1].value + ", B: " + inputs[2].value;
              img.style.background = "rgb(" + inputs[0].value +"," + inputs[1].value + "," + inputs[2].value+ ")";
        }
    }
</script>

css

<style type="text/css">
    .slider {
        width: 255px;
        height: 14px;
    }
</style>