fix(material-experimental/mdc-slider): append class to indicate short value indicator text (#23566)

* This class is only used internally. It is a temporary fix which will be removed
  once the appending of this class is handled by the mdc foundation (cl/388828896).

Author: wagnermaciel

src/material-experimental/mdc-slider/slider.ts

@@ -80,6 +80,10 @@ export interface MatSliderDragEvent {
   styleUrls: ['slider-thumb.css'],
   host: {
     'class': 'mdc-slider__thumb mat-mdc-slider-visual-thumb',
+
+    // NOTE: This class is used internally.
+    // TODO(wagnermaciel): Remove this once it is handled by the mdc foundation (cl/388828896).
+    '[class.mdc-slider__thumb--short-value]': '_isShortValue()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -150,6 +154,11 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
     this._elementRef.nativeElement.removeEventListener('mouseleave', this._onMouseLeave);
   }
 
+  /** Used to append a class to indicate when the value indicator text is short. */
+  _isShortValue(): boolean {
+    return this.valueIndicatorText?.length <= 2;
+  }
+
   private _onMouseEnter = (): void => {
     this._isHovered = true;
     // We don't want to show the hover ripple on top of the focus ripple.