問題タブ [angular-renderer2]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 固定サムラベル付きAngular Materialマットスライダー
スライダーを動かしても一緒に動かないサムラベル付きのマットスライダーを使用したいと思います。私が見る方法では、「mat-slider-thumb-container」全体が「transform:translateX(xx%)」スタイルでスライダーに沿って移動するので、同じスタイルを -xx% で追加すると推測できます「mat-slider-thumb-label」は常にスライダーの中央にある必要がありますか?
<div class="mat-slider-thumb-container" style="transform: translateX(-100%);" ng-reflect-ng-style="[object Object]"><div class="mat-slider-focus-ring"></div><div class="mat-slider-thumb"></div><div class="mat-slider-thumb-label"><span class="mat-slider-thumb-label-text">0</span></div></div>
まず、Angular はどのように xx% を取得し、どのようにこの値を取得できますか? 回避策は、スライダーの実際の値と最小/最大値でパーセンテージを計算することですが、角度はこのパーセンテージをいくつかの変数に保存する必要があるため、同じ変数を使用する方がはるかにエレガントであるかのように感じますangular を使用する必要があります。
「mat-slider-thumb-label」クラスの要素に「tranform:translateX(xx%)」のスタイルを追加するディレクティブを使用しようとしましたが、無視されているようです。background-color や width などの他のスタイルを追加すると、まったく問題なく動作しますが、変換は完全に無視されているようで、その理由がよくわかりません。
また、% の代わりに px のような変換の他の値を試したり、要素を回転させたりしましたが、何も機能していないようです。
私のhtml：
これは私が実際にここに投稿する最初の質問です。問題を十分に明確に表現できれば幸いです。解決策を見つけるためのすべての提案を歓迎します