使用滑块Angular进行平滑的颜色更改

如何解决使用滑块Angular进行平滑的颜色更改

我要实现的目标是根据滑块值设置不同的背景颜色。

滑块看起来像这样：

<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