JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<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" onchange = "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" onchange = "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" onchange = "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);

  document.getElementById('main').style.backgroundColor = 'rgb('+r+', '+g+', '+b+')';
}   
</script>

CSS

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