Change the Material Slider Thumb size

Question

so I have this project where I used Mat Slider and I'm showing text values on it's thumb, but the thumb size is too small for my text ! I looked a lot for a way to change the thumb size but I didn't find anything! I'm not that good in CSS so I couldn't mess around with it to try to make it some how work! can you please help me ?

edit:

I want the word to fit in the thumb

score 4 · Answer 1 · answered Sep 15 '20 at 02:05

I had this exact problem right now and after a little bit of looking I think I have a somewhat decent solution You can target a mat-slider's thumb by using ::ng-deep so the code would would look like

::ng-deep .mat-slider-wrapper {

  .mat-slider-thumb-container {
    .mat-slider-thumb-label {
      width: 50px;
      height: 50px;
      top: -62px;
      right: -25px;
    }
  }
}

Where width and height can be changed to your desired values from their default of 28px

The top and right are a bit different, so the default right is -14px which is -(1/2) * width so you can use that to calculate your right. The top was a bit different. The default top is -40px so I just added -(height - defaultHeight) to it and got -62, however when testing this with a larger height value it didn't work as well as I expected so tinker with he top until you get the desired placement.

this isnt showing any effect for me even when I put it into the global styles.css file. is there something I'm missing? — Ryan Loggerythm, Apr 08 '21 at 04:09
i just needed to add " !important" to the end of each line. thanks! — Ryan Loggerythm, Apr 08 '21 at 04:14

Awais · Answer 2 · 2019-12-12T11:49:35.687

1

I think you are looking for something like this

HTML

<mat-slider
  thumbLabel
  [displayWith]="formatLabel"
  tickInterval="1000"
  min="1"
  max="100000" class="cdk-focused"></mat-slider>

TS

import {Component} from '@angular/core';
@Component({
  selector: 'slider-formatting-example',
  templateUrl: 'slider-formatting-example.html',
  styleUrls: ['slider-formatting-example.css'],
})
export class SliderFormattingExample {
  formatLabel(value: number | null) {
    if (!value) {
      return 0;
    }

    if (value >= 1000) {
      return Math.round(value / 1000) + 'k';
    }

    return value;
  }
}

CSS

mat-slider {
  width: 300px;
}

edited Dec 12 '19 at 11:49

answered Dec 12 '19 at 10:38

Awais

4,752
4
17
40

that didn't work! it changed the size of the sliding circle.. what I want to change is the size of the thumb that bubble like shaped – Baraa Al-jabali Dec 12 '19 at 10:51
It look wired if you do that the bubble size would be so big to get text inside – Awais Dec 12 '19 at 11:39
@BaraaAl-jabali Updated my answer have a look please – Awais Dec 12 '19 at 11:49
it didn't work! and I need to show the name, so maybe then make the bubble transparent? can that be done? if the size cannot change? – Baraa Al-jabali Dec 12 '19 at 12:17
Yes thats the good idea, this can be done by `.mat-slider-thumb-label { background: transparent !important;}` – Awais Dec 12 '19 at 12:36
will that did work.. but I was able to change the size after trying this.. I changed it using height and width => width: 60px !important; height: 60px !important; – Baraa Al-jabali Dec 12 '19 at 13:02
@BaraaAl-jabali Glad to here that! You solved it by yourself Cheers – Awais Dec 12 '19 at 13:06

score 0 · Answer 3 · edited Oct 20 '20 at 21:09

0

.mat-slider-thumb-label-text {
    transform: rotate(0deg) !important;
    opacity: 1 !important;
    color: black !important;
}

.mat-slider:not(.mat-slider-disabled).cdk-focused .mat-slider-thumb-label {
    transform: rotate(0deg) !important;
    border-radius: 5px 5px 0 !important;
    width: 7rem !important;
    right: 0px !important;
    top: -30px !important;
}

edited Oct 20 '20 at 21:09

David Buck

3,752
35
31
35

answered Oct 20 '20 at 19:31

Sudipto Koyal

11

Adam Hamdi · Answer 4 · 2021-07-09T16:37:51.690

0

I tried many times: I found this solution i hope it helps you all.

::ng-deep 
   .mat-slider 
   .mat-slider-wrapper 
   .mat-slider-thumb-container 
   .mat-slider-thumb-label:hover {
    your code here !
}

edited Jul 09 '21 at 16:37

answered Jun 30 '21 at 14:17

Adam Hamdi

31
3

score 0 · Answer 5 · answered Dec 22 '22 at 14:46

With Angular 15 / Material 15 you'll need something like this:

Template:

<mat-slider class="mySlider" ...>

CSS:

.mySlider {
  width: 500px !important;
}
.mySlider
  .mdc-slider__thumb--with-indicator
  .mdc-slider__value-indicator-container
  .mdc-slider__value-indicator {
  width: 200px;
}
.mySlider
  .mdc-slider__thumb--with-indicator[ng-reflect-thumb-position='1']
  .mdc-slider__value-indicator-container
  .mdc-slider__value-indicator {
  background-color: red;
}
.mySlider
  .mdc-slider__thumb--with-indicator[ng-reflect-thumb-position='2']
  .mdc-slider__value-indicator-container
  .mdc-slider__value-indicator {
  background-color: green;
}

You can also remove the class of the slider and just use mat-slider instead, but AFAIK that's illegal styling. Like using ::ng-deep basically too. That's why I've used encapsulation: ViewEncapsulation.None in this example.

Have a look at this working example: https://stackblitz.com/edit/angular15-material-range-slider-styling

Change the Material Slider Thumb size

5 Answers5