CODEWITHSUNDEEP
javascripthtmlcssangularangular-material2
infodev
infodev

Reputation: 5225

Disable interactions on mat-slider and keeping css styles

I'm trying to make a readonly mat-slider with a thumb Label always on screen.

I have my mat-slider component

<mat-slider
    class="example-margin"
    [disabled]="false"
    [thumbLabel]="true"
    [tickInterval]="tickInterval"
    [(ngModel)]='value'
    >
</mat-slider>

To keep Thumb Label always visible I have used these css properties

::ng-deep .mat-slider-thumb-label {
  transform: rotate(45deg) !important;
  border-radius: 50% 50% 0 !important;
}

::ng-deep .mat-slider-thumb {
  transform: scale(0) !important;
}

::ng-deep .mat-slider-thumb-label-text {
  opacity: 1 !important;

}

To stop interaction with the mat-slider I used disabled=true but when I do that the styles disappears and the thumb Label also, then I get an empty space in the bar

enter image description here

Here what I want but with interactions disabled

enter image description here

Here a Demo

Upvotes: 4

Views: 2883

Answers (3)

erickyi2006
erickyi2006

Reputation: 222

Sharing a solution that works in Angular 8 without having to use the ::ng-deep (see Note below)

in your mat-slider specify the following

  • class:"cdk-focused"
  • style:"pointer-events:none"

Sample HTML code fragement

            <mat-slider class="cdk-focused" style="pointer-events:none;" min="0" max="100" thumbLabel="true"
                disabled="false" [value]="item.percent" [displayWith]="formatPercentage">
            </mat-slider>

Note: ng-deep is deprecated

Upvotes: 0

Shabbir Dhangot
Shabbir Dhangot

Reputation: 9121

This you can achieve by disallowing pointer-events on the control. I have modified some CSS and pointer-event also disabled.

CSS

::ng-deep .mat-slider-thumb-label {
   transform: rotate(45deg) !important;
   background-color: #ffd740 !important;  <-- make color important so it will not change or disappear in any condition
   border-radius: 50% 50% 0 !important;
}

Added inline style

style="pointer-events: none;"

Stackbliz URL : https://stackblitz.com/edit/angular-fkzv3z

Upvotes: 3

Aslam
Aslam

Reputation: 9680

It won't work as expected by disabling it. One solution is to overwrite the disabled class styling, which will be a lot and not the optimum solution.

I would recommend just to disable the pointer-events.

e.g 

.example-margin {
  pointer-events: none;
}

This will not allow pointer interactions and your use case is solved :)

Upvotes: 1

Related Questions