JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<ul class="playervolume">
<li onclick="set0Volume()"></li>
<li onclick="set1Volume()"></li>
<li onclick="set2Volume()"></li>
<li onclick="set3Volume()"></li>
<li onclick="set4Volume()"></li>
<li onclick="set5Volume()"></li>
<li onclick="set6Volume()"></li>
<li onclick="set7Volume()"></li>
<li onclick="set8Volume()"></li>
<li onclick="set9Volume()"></li>
<li onclick="set10Volume()"></li>
</ul>
<br>
    <br>
    <video id="video1" controls="controls">
        <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" />
      <source src="mov_bbb.ogg" type="video/ogg" />
  Your browser does not support HTML5 video.
</video>
      <script>
myVid=document.getElementById("video1");
 function set0Volume(){ myVid.volume=0.0;} 
 function set1Volume(){ myVid.volume=0.1;} 
 function set2Volume(){ myVid.volume=0.2;} 
 function set3Volume(){ myVid.volume=0.3;} 
 function set4Volume(){ myVid.volume=0.4;} 
 function set5Volume(){ myVid.volume=0.5;} 
 function set6Volume(){ myVid.volume=0.6;} 
 function set7Volume(){ myVid.volume=0.7;} 
 function set8Volume(){ myVid.volume=0.8;}
 function set9Volume(){ myVid.volume=0.9;}
 function set10Volume(){ myVid.volume=1.0;}
</script>

CSS

*{margin:0;padding:0;}
body{margin:20px;}
.playervolume li{float:left;list-style:none;height:15px;width:9px;background:#999;-webkit-transition:all 0.05s ease;margin-left:0;border-left:2px solid #fff;cursor:default;-webkit-transition-delay:0.05s;}
.playervolume li:hover{-webkit-transition:all 0.05s ease;height:17px;margin-top:-2px;background:#888;}