Dynamically setting CSS property left using width calculation Angular 6

Question

I'm currently building a CSS audio player and I am setting the width of a div to represent the current progress of the audio using a [style] like below, and it works just great:

<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div>

I also want to draw a little circle at the end of the progress div above by setting the 'left' CSS property of another class. This would be in english:

(Parent Width px) - (Progress Width px)

I've tried using the calc() function but it doesn't like it and the percentage calculated wouldn't know to use the width I think....

<div class="player-progress-handle" [style.left.px]="calc(100% - (currentTime * 100)/duration"></div>

The CSS classes are:

.player-progress-current {
    width: 100%;
    height: 1px;
    background-color: red;
}

.player-progress-handle {
    position: relative;
    bottom: 1px;
    border: 1px solid #f50;
    border-radius: 100%;
    height: 8px;
    width: 8px;
    background-color: #f50;
    box-sizing: border-box;
    margin-top: -4px;
    margin-left: -4px;
 }

Any ideas how the best way to do this is? I'm sure I can find a hacky way but would like the find the correct way

Answer 1

You might use :after for your handle and get rid of the calculations:

.player-progress-current {
  position: relative;
  width: 50%;
  height: 1px;
  margin: 20px 0;
  background: red;
}

.player-progress-current:after {
  content: '';
  position: absolute;
  right:-3px; bottom: 1px;
  border: 1px solid #f50;
  border-radius: 55%;
  height: 8px;
  width: 8px;
  background-color: #f50;
  box-sizing: border-box;
}

<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div>