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

【问题标题】：Angular2 apply dynamic style to range control change eventAngular2将动态样式应用于范围控制更改事件
【发布时间】：2017-10-31 22:03:14
【问题描述】：

我正在尝试为输入范围滑块控件应用不同的上下填充颜色。在 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%)' ); 
}  );

这是我需要的：

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

当前 Edge 工作，因为它不需要任何脚本代码来动态设置滑块中的值，但 chrome 需要一些脚本来挂钩滑块的更改事件，以便将 css % 值应用于线性渐变。任何人都可以帮助在 Angular2 中完成这项工作吗？

【问题讨论】：

标签： angular css google-chrome slider microsoft-edge

【解决方案1】：

您可以通过绑定到背景样式并创建模板变量#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>

【讨论】：