Color Div via RGB SLIDERS

by firegroove

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div data-role="content" class = "main" id = "main">
    <div data-role="fieldcontain" data-controltype="slider" class="redSlider">      
        <label for="red" color="red">
            Red
        </label>
        <input id="red" type="range" name="redSlider" value="255" min="0" max="255"
        data-highlight="true" data-mini="true" oninput = "changeBackground()" />
    </div>
    <div data-role="fieldcontain" data-controltype="slider" class="greenSlider">
        <label for="green">
            Green
        </label>
        <input id="green" type="range" name="greenSlider" value="255" min="0"
        max="255" data-highlight="true" data-mini="true" oninput = "changeBackground()" />
    </div>
    <div data-role="fieldcontain" data-controltype="slider" class="blueSlider">
        <label for="blue">
            Blue
        </label>
        <input id="blue" type="range" name="blueSlider" value="255" min="0" max="255"
        data-highlight="true" data-mini="true" oninput = "changeBackground()" />
    </div>

</div>
        
<script>
function changeBackground () {
  var r = parseInt(document.getElementById('red').value, 10),
      g = parseInt(document.getElementById('green').value, 10),
      b = parseInt(document.getElementById('blue').value, 10);

  $('#main').css("background-color",'rgb('+ 0 + ', '+g+', '+0+')');
}   
</script>

CSS

#main {
    width: 200px;
    height: 200px;
}