web-dev-qa-db-fra.com

Style le curseur Angular Material afin qu'il soit plus épais / plus haut

J'ai des problèmes pour trouver la sauce magique ici .. Il ne semble pas que l'API le supporte, donc je suppose que je cherche du CSS pour agrandir le curseur.

enter image description here

Je reçois celui de gauche, mais je voudrais le styler comme celui de droite? Toute astuce CSS ou quelqu'un l'a déjà fait.

Plus précisément la hauteur de la "barre". il y a un million de choses réglées en hauteur: 2px. j'ai essayé de tous les augmenter mais rien n'a changé .. je suppose que c'est peut-être une frontière ou autre chose?

Merci d'avance!

StackBlitz: https://stackblitz.com/angular/kkmmddyaegp?file=app%2Fslider-overview-example.css (Merci @Andriy)

cssangularangular-material
8
JBoothUA

Vous pouvez essayer d'ajouter ce CSS au style global:

.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
  top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
  height: 12px;
  border-radius: 10px
}
.mat-slider.mat-slider-horizontal .mat-slider-track-background,
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
  height: 100%;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
  background-color: blue;
}
.mat-accent .mat-slider-thumb {
  height: 30px;
  width: 30px;
  background-color: white;
  border: solid 2px gray;
  bottom: -20px;
  right: -20px;
}
.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
  background-color: white;
}

STACKBLITZ

10
Andriy

La solution la plus directe est probablement d'utiliser transform. Quelque chose comme:

my-slider {
    transform: scale(2);
}

Voir MDN pour plus de détails: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

3
Joe Selman