CODEWITHSUNDEEP
angularmaterial-design
Alexander Timofieiev
Alexander Timofieiev

Reputation: 31

How to Make material slider disabled

I am using Angluar with material design, i am facing some issue, so the question is how to make material slider disabled on some specific value

<mat-slider min="1" max="5" step="0.5" value="{{myVar}}"></mat-slider>

I need to show it on my component with some specific value that comes from db, and can not be changed until it will change into db.

Upvotes: 2

Views: 6571

Answers (3)

WantToDo
WantToDo

Reputation: 441

Adding style="pointer-events: none;" will prevent the value from changing

<mat-slider style="pointer-events: none;" min="1" max="5" step="0.5" value="{{myVar}}" ></mat-slider>

Upvotes: 0

alsami
alsami

Reputation: 9815

So let us say you have a model that looks like this

export interface MyModel {
   someValue: number;
}

And you load it within your component using some service that calls your API. Just pass the condition via disabled input to it.

<mat-slider [disabled]="myModel.someValue > 50" min="1" max="5" step="0.5" value="{{myVar}}"></mat-slider>

Upvotes: 6

Kraken
Kraken

Reputation: 1955

Actually you can just use disabled as like this

<mat-slider min="1" max="5" disabled  step="0.5" value="{{myVar}}"></mat-slider>

not big deal.

Upvotes: 3

Related Questions