Плавная смена цвета с помощью ползунка Угловой

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