<script type="text/javascript">
function updateTextInput() {
  var valueHue = document.getElementById('sliderHue').value;
  var valueSaturation = document.getElementById('sliderSaturation').value;
  var valueLightness = document.getElementById('sliderLightness').value;

  document.getElementById('textHue').value = valueHue;
  document.getElementById('textSaturation').value = valueSaturation + "%";
  document.getElementById('textLightness').value = valueLightness + "%";

  var color = "hsl(" + valueHue + ", " + valueSaturation + "%, " + valueLightness + "%)";
  document.getElementById('colorDisplay').setAttribute('style', "background-color:" + color);
}
</script>


<div>
Hue:
<br>
<input id="sliderHue" type="range" min="0" max="360" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textHue" value="">
<br>
<br>
<br>Saturation:
<br>
<input id="sliderSaturation" type="range" min="0" max="100" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textSaturation" value="">
<br>
<br>
<br>Lightness:
<br>
<input id="sliderLightness" type="range" min="0" max="100" step="1" onchange="updateTextInput();">
<br>
<input type="text" id="textLightness" value="">
</div>