JSFiddle - React, Tailwind, and code Playground

by nocturnesound

HTML

<div id="player"></div>

CSS

#player {
    border: solid 1px black;
    padding 5px;
    width:548px;
    height:70px;
    background-color:red;
    optically: 6;
    
   border-radius: 10px;  /* свойство для тех кто его поддерживает */
  -moz-border-radius: 10px;  /* для firefox */
  -webkit-border-radius: 10px;  /* для Safari и Chrome */
}

#play {
    border: solid 1px white;
    margin-left:20px;
    margin-top:4px;
    width:60px;
    height:60px;
    background-color:black;
    color:white;
    display: inline-block;
    
}

#slice {
    border: solid 1px white;
    margin-left:20px;
    margin-top:4px;
    width:300px;
    height:60px;
    background-color:black;
    color:white;
    display: inline-block;
 
}

#sliceMask {
    border: solid 1px white;
    margin-left:20px;
    margin-top:4px;
    width:300px;
    height:60px;
    background-color:yellow;
    color:white;
    display: inline-block;
    
    margin-left:-302px;
    position:absolute;

    
}

#volume {
    border: solid 1px white;
    margin-left:20px;
    margin-top:4px;
    width:100px;
    height:60px;
    background-color:black;
    color:white;
    display: inline-block;
}

JavaScript

var command = ["play",
              "stop",
              "pause",
              "volume",
              "duration"
              ];




$("#player").append("<div id='play'></div>");
$("#player").append("<div id='slice'></div>");
$("#player").append("<div id='sliceMask'></div>");
$("#player").append("<div id='volume'></div>");


function setDuration(duration) {
   if(duration <= 100) {
      $('#sliceMask').css('width', duration * 3);
   }
}

$('#slice').click(function (e) {
    var dur = e.pageX-112;
    setDuration(dur);
    alert(e.pageX);
});