Question

我尝试为输入范围滑块控件应用不同的下部和上部填充颜色。在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中完成这项工作吗？

Answer 1

您可以通过绑定到背景样式并创建模板变量#slider来实现此目的。

＆＃13;

 <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>

＆＃13;

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

1 个答案: