Angular14+TailwindCSS实现滑块柄颜色动态修改问题

我折腾了一整天想修改滑块的滑块柄（thumb）颜色，始终实现不了动态修改效果。静态设置颜色很简单，但要支持用户通过颜色选择器修改就卡壳了。当前技术栈是Angular 14 + TailwindCSS。

我用[&::-webkit-slider-thumb]选择器能固定设置滑块柄颜色，但尝试通过[ngClass]动态修改完全没效果。还写了如下函数：

public get sliderClasses(): string {
    return `[&::-webkit-slider-thumb]:bg-[${this.primary}] [&::-webkit-slider-thumb:active]:bg-[${this.secondary}]`;
}

其中primary和secondary是十六进制颜色码（比如#FF0000），将这个函数返回的类名绑定到[ngClass]上也毫无作用，求解决思路？

尝试他人建议的过程 #

一开始试了@Wongjn提供的方案，但发现--primary变量无值导致背景透明，用按钮测试的代码如下：

<input type="button" value="Submit" [style]="{'--primary': '#000'}" class="bg-[--primary]">

可行方案 #

调整后得到正确可行的方案，感谢@Wongjn！

<input type="button" value="Submit" [style]="{'--primary': '#000'}" class="bg-[var(--primary)]">

内容的提问来源于stack exchange，提问作者Georgeroni