Angular- mat-slider isn't displayed

Question

In my HTML file I am trying to use matslider in order to use sliders for a survey. The matslider is not showing up at all. I am not sure why as I imported it into app.module.ts

<mat-card>
    <mat-card-header>
        <mat-icon>question_answer</mat-icon>
        <mat-card-title>{{question}}</mat-card-title>
        <mat-card-subtitle>{{direction}}</mat-card-subtitle>
    </mat-card-header>
    <mat-slider min="minValue" max="maxValue" step="1" value="1"(change)="sliderChanged($event)"> 
    </mat-slider> 

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SurveyCardComponent } from './components/survey-card/survey-card.component';


@NgModule({
  declarations: [
    AppComponent,
    SurveyCardComponent
   
  ],
  imports: [
    BrowserModule,
    MatSliderModule,
    MatCardModule,
    MatIconModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

I guess, you have some variables in your component class, like:

minValue = 0;
maxValue = 100;
step = 1;
value = 1;

Then, in your template, you need to use property bindings :

The brackets, [] , cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the the right-hand side as a string literal and sets the property to that static value.

<mat-slider
  [min]="minValue"
  [max]="maxValue"
  [step]="step"
  [(ngModel)]="value"
  (ngModelChange)="modelChanged($event)">
</mat-slider>

Though, you should check your browsers console for further errors.