Angular2가 범위 컨트롤 변경 이벤트에 동적 스타일 적용

Question

입력 범위 슬라이더 컨트롤에 다른 위아래 채우기 색상을 적용하려고합니다. Edge에서는 여기에서 사용하는 CSS가 작동하지만 크롬에서는 js 스크립트가 필요합니다. 아래 코드는 있습니다.

HTML : :

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

CSS : 두 크롬과 가장자리에서이를 확인하기 위해 codepen 사용할 수 있습니다 에지 위해 일 포함 여기에 별도의 스타일과 크롬

/*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; 
    } 
} 

/크롬 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%)'); 
} ); 

다음

내가해야 할 것입니다 : 대신의 .js 코드를 사용

1. 사용 Angular2 코드를.
2. Edge와 Chrome에서 모두 작동하도록 설정해야합니다.

현재 가장자리는 슬라이더에 값을 동적으로 설정하는 데 스크립트 코드가 필요하지 않으므로 작동하지만 Chrome에서 슬라이더의 변경 이벤트를 후킹하여 선형 그라디언트에 적용 할 수 있어야합니다. 아무도 Angular2에서이 작업을 할 수 있습니까?

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