JSFiddle - React, Tailwind, and code Playground

HTML

<div class="per-group">
		<div id="ColorRGB" style="width:100px;height:100px;">RGB</div>
		<div class="handling">
			<span class="cate-name">赤:</span>
			<input type="range" min="-100" max="200" step="1" id="range-ColorRGB-backgroundColor-red" title="パーセント指定">
			<input type="text">
		</div>
		<div class="handling">
			<span class="cate-name">緑:</span>
			<input type="range" min="-100" max="200" step="1" id="range-ColorRGB-backgroundColor-green" title="パーセント指定">
			<input type="text">
		</div>
		<div class="handling">
			<span class="cate-name">青:</span>
			<input type="range" min="-100" max="200" step="1" id="range-ColorRGB-backgroundColor-blue" title="パーセント指定">
			<input type="text">
		</div>
		<div id="ColorHSL" style="width:100px;height:100px;">HSL</div>
		<div class="handling">
			<span class="cate-name">色相:</span>
			<input type="range" min="0" max="360" step="1" id="range-ColorHSL-backgroundColor-hue" title="角度指定">
			<input type="text">
		</div>
		<div class="handling">
			<span class="cate-name">彩度:</span>
			<input type="range" min="-100" max="200" step="1" id="range-ColorHSL-backgroundColor-Saturation" title="パーセント指定">
			<input type="text">
		</div>
		<div class="handling">
			<span class="cate-name">輝度:</span>
			<input type="range" min="-100" max="200" step="1" id="range-ColorHSL-backgroundColor-Lightness" title="パーセント指定">
			<input type="text">
		</div>
	</div>

	<p>以下、親要素(黒い太線)には"width:200px;height:100px;border:5px solid black;padding:10px;"を、子要素(青線)には"border:1px solid blue;padding:5px;"を標準で指定しています</p>

	<div class="per-group">
		<div class="parent1" style="width:300px;"><p id="LinHeiP" class="child1" style="font-size:16px;width:50%;">あいうえお<span id="LinHeiC">カキクケコ</span></p></div>
		<p style="font-weight:bold">"カキクケコ"の部分</p>
		<div class="handling">
			<span class="cate-name">font-size:</span>
			<input type="range" min="-100" max="200" step="1" id="range-LinHeiC-fontSize" title="パーセント指定">
			<input type="text">
		</div>
		<div...

CSS

.per-group{
		    overflow:hidden;
		    padding:10px 0;
		    border-bottom:1px solid #555;
		}

		.cate-name{
		    display:inline-block;
		    width:100px;
		}
		
		
		.parent1{
		    position:relative;
			width:200px;
			height:100px;
			border:5px solid black;
			padding:10px;
		}
		.child1{
			border:1px solid blue;
			padding:5px;
		}

JavaScript

$(function() {
			$('input[id^=range-]').change(function() {
				var thisID = $(this).attr('id');
				var objID = thisID.split("-")[1];
				var cate = thisID.split("-")[2];
				var kind = thisID.split("-")[3];

				if(kind === undefined) {
					$('#' + objID).css(cate, $(this).val() + '%');
					$(this).next().val($(this).val() + "%");
				} else {
					if(kind == "left") {
						$('#' + objID).css(cate, $(this).val() + '% ' + $("#" + thisID.replace("-left", "-right")).val() + "%");
						$(this).next().val($(this).val() + "%");
					} else if(kind == "right") {
						$('#' + objID).css(cate, $("#" + thisID.replace("-right", "-left")).val() + "%" + $(this).val() + '%');
						$(this).next().val($(this).val() + "%");
					} else if(kind == "red") {
						$('#' + objID).css(cate, "rgb(" + $(this).val() + "%," + $("#" + thisID.replace("-red", "-green")).val() + "%," + $("#" + thisID.replace("-red", "-blue")).val() + "%)");
						$(this).next().val($(this).val() + "%");
					} else if(kind == "green") {
						$('#' + objID).css(cate, "rgb(" + $("#" + thisID.replace("-green", "-red")).val() + "%," + $(this).val() + "%," + $("#" + thisID.replace("-green", "-blue")).val() + "%)");
						$(this).next().val($(this).val() + "%");
					} else if(kind == "blue") {
						$('#' + objID).css(cate, "rgb(" + $("#" + thisID.replace("-blue", "-red")).val() + "%," + $("#" + thisID.replace("-blue", "-green")).val() + "%," + $(this).val() + "%)");
						$(this).next().val($(this).val() + "%");
					} else if(kind == "hue") {
						$('#' + objID).css(cate, "hsl(" + $(this).val() + "," + $("#" + thisID.replace("-hue", "-Saturation")).val() + "%," + $("#" + thisID.replace("-hue", "-Lightness")).val() + "%)");
						$(this).next().val($(this).val());
					} else if(kind == "Saturation") {
						$('#' + objID).css(cate, "hsl(" + $("#" + thisID.replace("-Saturation", "-hue")).val() + "," + $(this).val() + "%," + $("#" + thisID.replace("-Saturation", "-Lightness")).val() +...