Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material Slider - allow minimum value without disabling the slider

I have a material slider in my angular project which I want to have a value between 200 and 5000.

I set the min value to 200. 200 is a valid value. However, when I slide the slider to 200, it disables itself as if the value is invalid.

Any idea how to disable this behaviour?

Slider:

<mat-slider min="200"
            max="5000"
            step="100"
            [value]="200"></mat-slider>
like image 766
DoubleA Avatar asked Feb 24 '26 16:02

DoubleA


1 Answers

In fact the slider is not disabled but the color is set to grey for an unknown reason.

I solved with the following lines:

    ::ng-deep .mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
      color: rgba(0, 0, 0, 0.87);
      background-color: mat-color($my-app-primary);
    }

    ::ng-deep .mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb {
      background-color: mat-color($my-app-primary);
    }
like image 78
Nicolas S Avatar answered Feb 27 '26 07:02

Nicolas S