[Angular 9] Custom CSS Variables binding

Html:

<input type="range" value="0" [style.--thumb-rotate]="720 * $any(input.value)/100 + 'deg'" #input (input)="0">

 

CSS:

input[type="range"]::-webkit-slider-thumb:active {
  background-position: 100% 0px;
  transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
}