madeas,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.flex-start {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
input[type=range] {
margin: 0;
padding: 0;
display: inline-block;
-webkit-appearance: none;
background: transparent;
border: 1px solid #eee;
height: 6px;
margin-bottom: 15px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
height: 20px;
width: 10px;
background: #47c9e5;
cursor: pointer;
z-index: 20;
-webkit-appearance: none;
position: relative;
}
.gen {
display: inline-block;
font-weight: bold;
color: #47c9e5;
min-width: 30px;
text-align: center;
}
.op0 {
opacity: 0;
}
.pl-20 {
padding-left: 20px;
min-width: 21%;
}
textarea.result {
position: relative;
display: block;
border-color: #ccc;
border-radius: 6px;
min-width: 200px;
font-family: inherit;
font-size: 1rem;
line-height: inherit;
width: 100%;
min-height: 205px;
padding: 5px;
height: auto;
}
</style>
<title></title>
<style type="text/css">
th.c1 {height: 55px}
</style>
</head>
<body>
<div class="flex-start">
<table>
<thead>
<tr>
<th class="c1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>-100 <input multiple id="range_lr" type="range" min="-100" max="100" step="1" value=
"18"> 100</td>
</tr>
<tr>
<td>-100 <input multiple id="range_tb" type="range" min="-100" max="100" step="1" value=
"18"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_sp" type="range" min="0" max=
"100" step="1" value="51"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_bl" type="range" min="0" max=
"100" step="1" value="24"> 100</td>
</tr>
<tr>
<td><span class="op0">000</span>0 <input multiple id="range_op" type="range" min="0" max=
"1" step="0.1" value="1"> 1</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
<div class="pl-20">
<h3>Result</h3>
<p>Right / Left (<span class="gen" id="res1"></span>)</p>
<p>Top / Bottom (<span class="gen" id="res2"></span>)</p>
<p>Spread (<span class="gen" id="res3"></span>)</p>
<p>Blur (<span class="gen" id="res4"></span>)</p>
<p>Opacity (<span class="gen" id="res5"></span>)</p>
</div>
<div class="pl-20">
<textarea class="result" id="result"></textarea>
</div>
</div><!-- flex-start -->
<input type="range" class="color" min="0" max="255" value="200">R<br>
<input type="range" class="color" min="0" max="255" value="200">G<br>
<input type="range" class="color" min="0" max="255" value="200">B<br>
<input type="range" class="color" min="0" max="1" step="0.1" value="1.0">A<br>
<script>
document.addEventListener('DOMContentLoaded', function() {
var col = document.querySelectorAll('.color');
var data = [];
[].forEach.call(col, function(el, i) {
data[i] = el.value;
el.oninput = e => {
data[i] = el.value;
outData()
}
});
var range = document.querySelectorAll('table [type="range"]'),
gen = document.querySelectorAll('.gen');
[].forEach.call(range, function(el, i) {
gen[i].innerHTML = data[i + col.length] = el.value;
el.oninput = e => {
gen[i].innerHTML = el.value;
data[i + col.length] = el.value;
outData()
}
});
function outData() {
var color = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3]})`,
shadow = `${data[4]}px ${data[5]}px ${data[6]}px ${data[7]}px`,
result = document.querySelector('.result');
result.style.boxShadow = `${shadow} ${color}`;
result.value = `box-shadow: ${shadow} \n${color}`;
}
outData()
});
</script>
</body>
</html>