web-dev-qa-db-ja.com

Angular Material Sliderを太く/高くなるようにスタイルします

ここで魔法のソースを見つけるのに問題があります。APIがそれをサポートしているようには見えないので、スライダーを大きくするためのCSSを探していると思います。

enter image description here

左のものを手に入れましたが、右のものと同じスタイルにしたいですか？ CSSはだまされたり、誰かがこれを以前にやったことがあります。

特に「バー」の高さ。高さ：2pxに設定されているものは100万あります。全部変えてみたが何も変わってなかった。たぶん国境かな？

前もって感謝します！

StackBlitz： https://stackblitz.com/angular/kkmmddyaegp?file=app%2Fslider-overview-example.css （@Andriyに感謝）

cssangularangular-material
8
JBoothUA

この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 [〜＃〜]

10
Andriy

最も直接的な解決策は、おそらくtransformを使用することです。何かのようなもの：

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

詳細についてはMDNを参照してください： https://developer.mozilla.org/en-US/docs/Web/CSS/transform

3
Joe Selman