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

Answer 1

.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;
}

Answer 2

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.

Answer 3

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

Answer 4

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;
}

Answer 5

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 !
}