controls layout test

by clauswilke

HTML

<div class="img">
</div>
<table class="controls">
  <tr>
    <td>R</td>
    <td><input type="number" min="0" max="5" value="1" step="0.1" id="inR"></td>
    <td><input type="range" min="0" max="5" value="1" step="0.1" id="inR-slider"></td>
  </tr>
  <tr>
    <td>G</td>
    <td><input type="number" min="0" max="5" value="1" step="0.1" id="inG"></td>
    <td><input type="range" min="0" max="5" value="1" step="0.1" id="inG-slider"></td>
  </tr>
  <tr>
    <td>B</td>
    <td><input type="number" min="0" max="5" value="1" step="0.1" id="inB"></td>
    <td><input type="range" min="0" max="5" value="1" step="0.1" id="inB-slider"></td>
  </tr>
  <tr class="divider"></tr>
   <tr>
    <td>a1</td>
    <td><input type="number" min="0" max="0.6" value="0.5" step="0.01" id="ina1"></td>
    <td><input type="range" min="0" max="0.6" value="0.5" step="0.01" id="ina1-slider"></td>
  </tr>
     <tr>
    <td>a2</td>
    <td><input type="number" min="0" max="0.6" value="0.5" step="0.01" id="ina2"></td>
    <td><input type="range" min="0" max="0.6" value="0.5" step="0.01" id="ina2-slider"></td>
  </tr>
   <tr>
    <td>a3</td>
    <td><input type="number" min="0" max="0.6" value="0.5" step="0.01" id="ina3"></td>
    <td><input type="range" min="0" max="0.6" value="0.5" step="0.01" id="ina3-slider"></td>
  </tr>
    <tr class="divider"></tr>
   <tr>
    <td>s1</td>
    <td><input type="number" min="0" max="1" value="0.5" step="0.01" id="ins1"></td>
    <td><input type="range" min="0" max="1" value="0.5" step="0.01" id="ins1-slider"></td>
  </tr>
   <tr>
    <td>s2</td>
    <td><input type="number" min="0" max="1" value="0.5" step="0.01" id="ins2"></td>
    <td><input type="range" min="0" max="1" value="0.5" step="0.01" id="ins2-slider"></td>
  </tr>
   <tr>
    <td>s3</td>
    <td><input type="number" min="0" max="1" value="0.5" step="0.01" id="ins3"></td>
    <td><input type="range" min="0" max="1" value="0.5" step="0.01" id="ins3-slider"></td>
  </tr>
    <tr class="divider"></tr>
  ...

CSS

.img {
  background: cornsilk;
  width: 70%;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}

.controls {
  display: inline-block;
  vertical-align: top;

}

.divider {
  height: 10px;
}

JavaScript

setupSlider("inR", "inR-slider")
setupSlider("inG", "inG-slider")
setupSlider("inB", "inB-slider")
setupSlider("ina1", "ina1-slider")
setupSlider("ina2", "ina2-slider")
setupSlider("ina3", "ina3-slider")
setupSlider("ins1", "ins1-slider")
setupSlider("ins2", "ins2-slider")
setupSlider("ins3", "ins3-slider")
setupSlider("ino1", "ino1-slider")
setupSlider("ino2", "ino2-slider")
setupSlider("ino3", "ino3-slider")

function setupSlider(text_id, slider_id) {
	let in_text = document.getElementById(text_id)
	let in_slider = document.getElementById(slider_id)

	in_text.oninput = function() {
  	in_slider.value = this.value
	}
	in_slider.oninput = function() {
  	in_text.value = this.value
	}
	in_text.value = in_slider.value
}