Angular2 将动态样式应用于范围控制更改事件

Question

我正在尝试为输入范围 slider 控件应用不同的上下填充颜色。在 Edge 中，我在这里使用的 CSS 有效，但在 chrome 中它需要一些 js 脚本。下面是我的代码。您可以使用 codepen 在 chrome 和 edge 中验证这一点:

HTML:

  <input class="slider" type="range"  value="60"/>

CSS:此处包含适用于 Edge 和 Chrome 的独立样式

/*Edge Css starts here*/
 _:-ms-lang(x), input[type=range] {
       -webkit-appearance: none;
        width: 80%;
        padding-top: 25px;  
}
_:-ms-lang(x), .slider{
    -webkit-appearance: none;
}
_:-ms-lang(x), .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;    
    height: 15px;
    border-radius: 50%;
    background: #008C9B;
    cursor: pointer;
}
 _:-ms-lang(x), input[type=range]::-ms-fill-lower {
    background: #008C9B;
    border-radius: 10px;
}
  _:-ms-lang(x), input[type=range]::-ms-fill-upper {
    background: #91CED7;
    border-radius: 10px;
}
/*Removing default tooltip of slider*/
 _:-ms-lang(x), input[type=range]::-ms-tooltip { display: none; }

/*Edge Css ends here*/
/*Chrome Css Starts here*/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    .slider{
        -webkit-appearance: none;
        width:80%;
        height:10px;
        border-radius: 5px;
        background: #91CED7;
        outline: none;
    }
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 15px;    
        height: 15px;
        border-radius: 50%;
        background: #008C9B;
        cursor: pointer;
    }
}

/Chrome Css 在这里结束/

.js

// Only for chrome
$( '.slider' ).on( 'input', function( ) {
    $( this ).css( 'background', 'linear-gradient(to right, #008C9B 0%, #008C9B '+this.value +'%, #91CED7 ' + this.value + '%, #91CED7 100%)' ); 
}  );

这是我需要的:

1. 使用 Angular2 代码而不是 .js 代码。
2. 我需要让它在 Edge 和 Chrome 中都能正常工作。

目前 Edge 工作，因为它不需要任何脚本代码来动态设置 slider 中的值，但 chrome 需要一些脚本来 Hook slider 的更改事件，以便将 css % 值应用于线性渐变。谁能帮助在 Angular2 中完成这项工作？

Answer 1

您可以通过绑定(bind)到背景样式并创建模板变量#slider 来实现这一点。

 <slider #slider
         class="slider"
         type="range"
         value="60" 
         [style.background]="'linear-gradient(to right, #008C9B 0%, #008C9B '+ slider.value +'%, #91CED7 ' + slider.value + '%, #91CED7 100%)'">
</slider>