practice

　　　　

<html>

<meta charset="utf-8">
<style>
.バーティカル[type="range"]{-webkit-appearance:slider-vertical;}
.コンポーネント_EQ_01{position:fixed;
top:200px;
left:100px;}
.ボックス_EQ_01{position:absolute;
top:0;
left:0;
height:200px;
width:200px;
border:solid 1px gray;
border-radius:4px;
background:linear-gradient(to right,#dddddd,#f8f8f8);
box-shadow:1px 1px;}
.EQ_1{position:absolute;
top:100px;
left:0;
transform:rotate(-90deg);}
.EQ_2{position:absolute;
top:100px;
left:20px;
transform:rotate(-90deg);}
.EQ_3{position:absolute;
top:100px;
left:40px;
transform:rotate(-90deg);}
.EQ_4{position:absolute;
top:100px;
left:60px;
transform:rotate(-90deg);}
.EQ_5{position:absolute;
top:100px;
left:80px;
transform:rotate(-90deg);}
.EQ_6{position:absolute;
top:100px;
left:100px;
transform:rotate(-90deg);}
.イコライザー{position:absolute;
top:4px;
left:8px;
width:200px;
font-size:12px;
font-family:"Arial Black";
color:white;
text-shadow:2px 2px black}
</style>

<input type="range"value="20">
<hr>
<input type="range"value="60"class="バーティカル">
<hr>
<div class="コンポーネント_EQ_01">
<div class="ボックス_EQ_01">
<input type="range"min="0"max="100"value="0"class="EQ_1">
<input type="range"min="0"max="100"value="20"class="EQ_2">
<input type="range"min="0"max="100"value="40"class="EQ_3">
<input type="range"min="0"max="100"value="60"step="10"class="EQ_4">
<input type="range"min="0"max="100"value="80"step="10"class="EQ_5">
<input type="range"min="0"max="100"value="100"step="10"class="EQ_6">
<div class="イコライザー">6 Band Graphic EQ</div>
</div>
</div>

</html>