在 angular2 中以编程方式设置 html slider 背景

Question

I want to create a custom slider component, where the background color should be set with angular data binding.

Here is a simple stackblitz example where the default color green should be overridden/exchanged with the data-bound color red.

What I tried:

• I know that sliders aren't standardized and that every browser has it's own representation
• I can't create many css classes with ng-deep like in this question because the background color should be data-bound.
• I tried with ngAfterViewInit() and document.getElementByID('slider'), but I can't get the access to the inner browser specific items (like webkit-slider-runnable-track)

Question

• Is there an "angular way" to create a property binding to background color of a slider?
• If not. Is there any way to set the background color of a slider within angular (with Javascript?)

Answer 1

You can use the power of css variables.

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>

Here is the implementation: https://stackblitz.com/edit/angular-oygzgp

Answer 2

You can use ngClass to set your color dynamically

in your css.

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

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

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

in your html:

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