Динамическое изменение стиля псевдоэлемента в директиве Angular2

Question

Есть ли способ динамического изменения стиля псевдоэлемента с помощью @HostBinding или другим способом в Angular2?

Я написал директиву для входных значений диапазона, и я хотел бы, чтобы изменение цвета ползунка зависело от значения.

export class AwesomeRangeDirective implements OnInit {

    @Input() firstColor: string;

    @Input() lastColor: string;

    colorPalette: string[] = [];

    @HostBinding('style.background')
    color: string = '#FFFFFF';

    ngOnInit(): void {
        this.calculateColorPalette(20);
    }

    private calculateColorPalette(volume: number) {
        const firstRGB = this.hexToRgb(this.firstColor);
        const lastRGB = this.hexToRgb(this.lastColor);
        let percent: number;
        let color: RGBColor;
        for (let iterator = 0; iterator < volume; iterator++) {
            percent = iterator / volume;
            color = this.calculateColor(firstRGB, lastRGB, percent);
            this.colorPalette.push(this.rgbToHex(color));
        }
    }
}

А для цветов #FFFFFF и # 000000 я получил корректный массив цветов.

["#ffffff", "# f2f2f2", "# e5e5e5", "# d8d8d8", "#cccccc", "#bfbfbf", "# b2b2b2", "# a5a5a5", "# 999999", "# 8c8c8c", "# 7f7f7f", "# 727272", "# 666666", "# 595959", "# 4c4c4c", "# 3f3f3f", "# 333333", "# 262626", "# 191919", "# 191919", "# 0c0c0c"]

Я могу динамически изменять цвет фона ввода, используя @HostBinding, но я совершенно не знаю, как я могу изменить цвет псевдоэлемента:

input[type=range]::-webkit-slider-thumb {
  background: #000000;
}

Это вообще возможно? Как я могу сделать это, не создавая отдельный компонент для слайдера?