CODEWITHSUNDEEP
angularangular-material
sally
sally

Reputation: 429

How can I display thumb label all the time for material slider?

I want to let thumb label to display all the time no matter it is focused or not. When I click on the slider it shows label like this.

enter image description here

But as soon as it is unfocused, the label is gone.

enter image description here

How can I get the label stay ?

Upvotes: 15

Views: 17593

Answers (5)

Hans Völzer
Hans Völzer

Reputation: 1

This is based on Indikas answer, thank you for that.

This does the job after migrating to mdc components in Material 15. Put this into the style.scss or a file that is imported by the style.scss. In my case I use a variable for the color, use whatever you want.

.mat-mdc-slider .mdc-slider__value-indicator::before {
  border-top-color: var(--accent-color) !important;
}
.mat-mdc-slider .mdc-slider__value-indicator {
  background-color: var(--accent-color) !important;
  opacity: 1 !important;
}
.mdc-slider .mdc-slider__value-indicator {
  transform: none !important;
}

Upvotes: 0

anas jelloul
anas jelloul

Reputation: 39

this works for me

.mdc-slider .mdc-slider__value-indicator {
  transform: none !important;
  opacity: 1 !important;
}

Upvotes: 3

Indika
Indika

Reputation: 348

mdc based slider in Angular Material V15

::ng-deep .mdc-slider .mdc-slider__value-indicator {
  transform: none !important;
}

Upvotes: 5

matt1616
matt1616

Reputation: 502

The accepted answer didn't work consistently for me until I wrapped it in ng-deep

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

This solution came from willshowell here: https://github.com/angular/components/issues/4803

Upvotes: 8

Mustahsan
Mustahsan

Reputation: 3862

Angular Material doesn't provide this functionality by default, but you can handle this by adding following css in your global css file:

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

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

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

Working demo on stackblitz

Upvotes: 29

Related Questions