Javascript 在angular2中以编程方式设置html滑块背景

我想创建一个自定义滑块组件，其中背景颜色应设置为角度数据绑定

下面是一个简单的示例，默认的绿色应该被数据绑定的红色覆盖/交换

我的尝试：

• 我知道滑块不是标准化的，每个浏览器都有自己的特点
• 我不能像中那样用ng deep创建很多css类，因为背景颜色应该是数据绑定的
• 我尝试使用ngAfterViewInit（）和document.getElementByID（'slider'），但无法访问内部特定于浏览器的项目（如webkit slider runnable track）

问题

• 是否有一种“角度方式”来创建绑定到滑块背景色的属性
• 如果没有。有没有办法在angular（使用Javascript）中设置滑块的背景色

---

您可以使用ngClass动态设置颜色

在你的css中

.test::-webkit-slider-runnable-track {
  background: red ;
}

.test::-ms-track {
  background:red ;
}

.test::-moz-range-track {
  background: red ;
}

在html中：

<input id='slider' type="range" [ngClass]="isRed ? 'red' : 'green'">

---

您可以使用css变量的强大功能

CSS

.slider{
  --bg: green;
}

::-webkit-slider-runnable-track {
  background:var(--bg);
}

::-ms-track {
  background: var(--bg);
}

::-moz-range-track {
  background: var(--bg);
}

HTML:

Set {{color}} as background for this slider:
<br />
<div class="slider" [attr.style]="sanitizer.bypassSecurityTrustStyle('--bg:' + color)">
    <input id='slider' type="range">
</div>

设置{{color}}作为此滑块的背景：

---

以下是实现：

您是否尝试使用css类？是否需要？我不想为每个可能的RGB组合创建16777216个类。