What is the Angular/Mobile friendly way to use a variable found within the component class to modify the value of an attribute on a pseudo-element?

Is there a better way to modify a pseudo-elements attribute using a component variable than what I am currently doing? I am not doing it the Angular way, but that is my goal. My way will surely break down when porting to mobile. I would like to put a variable within the component style sheet:

component:

@Input() public variable = variable;

component-style-sheet:

input[type=range].MPslide.pvd-slider::-webkit-slider-runnable-track{
 background:linear-gradient(#568200, #568200) 0/variable 100% no-repeat #ccc
}

Unfortunately it doesn't exist in my template so I can not place an [ngClass] or [style.margin-left.px]="containerX-9" or anything on it. At the moment I am doing this by setting a global CSS variable onFormChanges().

component:

  onFormChanges(): void {
this.myForm.valueChanges.subscribe(() => {
            document.documentElement.style.setProperty('--variable', variable)
}
}

component-style-sheet:

background:linear-gradient(#568200, #568200) 0/var(--variable) 100% no-repeat #ccc

But this seems like a workaround and hard to track. What is the Angular way to do this? Does Angular not have a way to use a component variable value in a pseudo element? What am I missing? Is there a cleaner way to do this? Thanks for any insights or suggestions!

from What is the Angular/Mobile friendly way to use a variable found within the component class to modify the value of an attribute on a pseudo-element?