Стиль слайдер угловой материал, чтобы он был толще / выше

Question

У меня проблемы с поиском волшебного соуса здесь ... Не похоже, что API его поддерживает, поэтому я думаю, что я ищу какой-то CSS, чтобы сделать слайдер больше.

Я получаю один слева, но я бы хотел придать ему стиль как тот, что справа?Любые трюки CSS или кто-то делал это раньше.

В частности, высота "бар".Есть миллион вещей, установленных на высоту: 2px.я пытался поднять их все, но ничего не изменилось .. я думаю, может быть, это граница или что-то еще?

Заранее спасибо!

StackBlitz: https://stackblitz.com/angular/kkmmddyaegp?file=app%2Fslider-overview-example.css (Спасибо @Andriy)

Answer 1

Вы можете попробовать добавить этот CSS в глобальный стиль:

.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

Answer 2

Наиболее прямым решением, вероятно, является использование transform.Что-то вроде:

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

См. MDN для более подробной информации: https://developer.mozilla.org/en-US/docs/Web/CSS/transform