css - 使用滑块 Angular 平滑颜色变化

Question

我想要实现的是根据滑块值不同的背景颜色。

滑块看起来像这样：

<mat-slider id="slider" #sldr max="100" min="0" step="10"></mat-slider>

我正在改变的元素是这样的：

<div class="area" [ngClass]="{'red': sldr.value <= 20,
        'orange': sldr.value <= 40 && sldr.value > 21,
        'yellow': sldr.value <= 60 && sldr.value > 41,
        'green': sldr.value <= 80 && sldr.value > 61,
        'blue': sldr.value > 81}"></div>

主要问题是如何实现颜色之间的平滑过渡？CSS 现在看起来像这样：

.area
  transition: background 2s ease-in-out
.blue
  background: linear-gradient(169.72deg, #BFE4FF -1.43%, rgba(255, 236, 233, 0.57) 78.13%), #E9F8FF
.red
  background: linear-gradient(144.6deg, #FFF3ED 10.54%, #FFB7D1 70.23%), #FFE3E2
.orange
  background: linear-gradient(180deg, #FFECF5 25.15%, #FFF2AC 114.65%, #FFDF7E 120.29%)
.yellow
  background: linear-gradient(180deg, #FFF9E8 25.15%, #E3F1D3 120.29%)
.green
  background: linear-gradient(163.85deg, #E0FCFE 8.3%, #E2F0D2 61.38%), #E0EAD4

标签： cssangularslidertransitionmat-slider