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">
      Greenb
    </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;
}