Angular mat-slider stops working after adding logic to it

I'm trying to create feedback feature where you can slide over to 4 breakpoints. 0 = not answered, 1 = bad, 2 = ok, 3 = good. mat-slider stops working when I add logic to it.

I was expecting slider to stop at breakpoints, but it wont move at all. Angular Version is 19

feedback.component.html

div class="container">
<div class="feedback" *ngFor="let question of questions">
<p>{{ question.questionText }}</p>
<mat-slider
min="0"
max="3"
step="1"
[(ngModel)]="question.answer"
(input)="onInputChange($event, question)"
color="accent"
aria-label="Feedback slider">
</mat-slider>
<p>Feedback: {{ question.answer }}</p>
</div>
</div>


feedback.component.ts

import { Component } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { Question } from '../question';

@Component({
selector: 'app-feedback',
standalone: true,
imports: [MatSliderModule, FormsModule, CommonModule],
templateUrl: './feedback.component.html',
styleUrls: ['./feedback.component.css'],
})
export class FeedbackComponent {
questions: Question[] = [
new Question('Kysymys 1'),
new Question('Kysymys 2'),
new Question('Kysymys 3'),
];

// Handles input from the slider
onInputChange(event: any, question: Question): void {
const value = event.value;
question.setFeedback(value); // Map slider value to feedback
console.log(`Updated feedback for ${question.questionText}: ${question.answer}`);
}
}


question.ts

export class Question {
questionText: string;
answer: string;

constructor(question: string) {
this.questionText = question;
this.answer = "Ei arvosteltu"; // Default answer
}

setFeedback(value: number): void {
if (value === 0) {
this.answer = "Ei arvosteltu"; // Not rated yet
} else if (value === 1) {
this.answer = "Huono"; // Bad
} else if (value === 2) {
this.answer = "Kohtalainen"; // Okay
} else if (value === 3) {
this.answer = "Hyvä"; // Good
}
}
}

Continue reading...