CODEWITHSUNDEEP
cssangularslidertransitionmat-slider
Kateryna
Kateryna

Reputation: 45

Smooth color change with a slider Angular

What I am trying to achieve is different background color depending on slider value.

The slider looks something like this:

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

And the element I'm changing like this:

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

The main question is how do I achieve smooth transition between colours? CSS looks something like this at the moment:

.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

Upvotes: 0

Views: 242

Answers (0)

Related Questions