$(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() + "%)");
$(this).next().val($(this).val() + "%");
} else if(kind == "Lightness") {
$('#' + objID).css(cate, "hsl(" + $("#" + thisID.replace("-Lightness", "-hue")).val() + "," + $("#" + thisID.replace("-Lightness", "-Saturation")).val() + "%," + $(this).val() + "%)");
$(this).next().val($(this).val() + "%");
} else if(kind == "horizontal") {
$('#' + objID).css(cate, $(this).val() + "% " + "/" + $("#" + thisID.replace("-horizontal", "-vertical")).val() + "%");
$(this).next().val($(this).val() + "%");
} else if(kind == "vertical") {
$('#' + objID).css(cate, $("#" + thisID.replace("-vertical", "-horizontal")).val() + "% " + "/" + $(this).val() + "%");
$(this).next().val($(this).val() + "%");
} else if(kind == "deg") {
$('#' + objID).css(cate, "rotate(" + $(this).val() + "deg)");
$(this).next().val($(this).val() + "deg");
} else {
$('#' + objID).css(cate, $(this).val() + kind);
$(this).next().val($(this).val() + kind);
}
}
});
$('input[id^=range-]').each(function() { $(this).val($(this).attr('max') / 4) });
$('input[id^=range-]').trigger("change");
});
<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 class="handling">
<span class="cate-name">vertical-align:</span>
<input type="range" min="-100" max="200" step="1" id="range-LinHeiC-verticalAlign" title="パーセント指定">
<input type="text">
</div>
<p style="font-weight:bold">"あいうえおカキクケコ"の部分</p>
<div class="handling">
<span class="cate-name">line-height:</span>
<input type="range" min="-100" max="200" step="1" id="range-LinHeiP-lineHeight" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">line-height(数値):</span>
<input type="range" min="-1" max="2" step="0.1" id="range-LinHeiP-lineHeight-" title="数値指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">text-indent:</span>
<input type="range" min="-100" max="200" step="1" id="range-LinHeiP-textIndent" title="パーセント指定">
<input type="text">
</div>
</div>
<div class="per-group">
<div class="parent1"><div id="WidHei" class="child1">widthとheight</div></div>
<div class="handling">
<span class="cate-name">width:</span>
<input type="range" min="-100" max="200" step="1" id="range-WidHei-width" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">height:</span>
<input type="range" min="-100" max="200" step="1" id="range-WidHei-height" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">min-width:</span>
<input type="range" min="-100" max="200" step="1" id="range-WidHei-minWidth" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">max-width:</span>
<input type="range" min="-100" max="200" step="1" id="range-WidHei-maxWidth" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">min-height:</span>
<input type="range" min="-100" max="200" step="1" id="range-WidHei-minHeight" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">max-height:</span>
<input type="range" min="-100" max="200" step="1" id="range-WidHei-maxHeight" title="パーセント指定">
<input type="text">
</div>
</div>
<div class="per-group">
<div class="parent1"><div id="MarPad" class="child1">marginとpadding</div></div>
<div class="handling">
<span class="cate-name">margin-left:</span>
<input type="range" min="-100" max="200" step="1" id="range-MarPad-marginLeft" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">margin-top:</span>
<input type="range" min="-100" max="200" step="1" id="range-MarPad-marginTop" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">padding-left:</span>
<input type="range" min="-100" max="200" step="1" id="range-MarPad-paddingLeft" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">padding-top:</span>
<input type="range" min="-100" max="200" step="1" id="range-MarPad-paddingTop" title="パーセント指定">
<input type="text">
</div>
</div>
<div class="per-group">
<div class="parent1"><div id="Posi" class="child1" style="position:absolute;width:50px;height:50px;">position</div></div>
<div class="handling">
<span class="cate-name">left:</span>
<input type="range" min="-100" max="200" step="1" id="range-Posi-left" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">top:</span>
<input type="range" min="-100" max="200" step="1" id="range-Posi-top" title="パーセント指定">
<input type="text">
</div>
</div>
<div class="per-group">
<div class="parent1" id="BackGrnd" style="background-image:url(http://placehold.jp/150x50.png);background-repeat:no-repeat;"></div>
<div class="handling">
<span class="cate-name">background-position(横):</span>
<input type="range" min="-100" max="200" step="1" id="range-BackGrnd-backgroundPosition-left" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">background-position(縦):</span>
<input type="range" min="-100" max="200" step="1" id="range-BackGrnd-backgroundPosition-right" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">background-size(横):</span>
<input type="range" min="-100" max="200" step="1" id="range-BackGrnd-backgroundSize-left" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">background-size(縦):</span>
<input type="range" min="-100" max="200" step="1" id="range-BackGrnd-backgroundSize-right" title="パーセント指定">
<input type="text">
</div>
</div>
<div class="per-group">
<div class="parent1" id="Border">border</div>
<div class="handling">
<span class="cate-name">border-radius<br>(水平方向):</span>
<input type="range" min="-100" max="200" step="1" id="range-Border-borderRadius-horizontal" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">border-radius<br>(垂直方向):</span>
<input type="range" min="-100" max="200" step="1" id="range-Border-borderRadius-vertical" title="パーセント指定">
<input type="text">
</div>
</div>
<div class="per-group">
<div class="parent1"><div class="child1" id="TrorRot">transform-origin<br>rotate</div></div>
<div class="handling">
<span class="cate-name">transform-origin(横):</span>
<input type="range" min="-100" max="200" step="1" id="range-TrorRot-transformOrigin-left" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">transform-origin(縦):</span>
<input type="range" min="-100" max="200" step="1" id="range-TrorRot-transformOrigin-right" title="パーセント指定">
<input type="text">
</div>
<div class="handling">
<span class="cate-name">rotate:</span>
<input type="range" min="0" max="360" step="1" id="range-TrorRot-transform-deg" title="角度指定">
<input type="text">
</div>
</div>
.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;
}