From e0787b9d92752499cd128007c1fa263d0c96417a Mon Sep 17 00:00:00 2001
From: Prosper Shongwe <pshongwe@retrorabbit.co.za>
Date: Fri, 26 Jul 2024 08:28:35 +0200
Subject: [PATCH] feat(material/slider): Support for multi word thumb label
 text #28599

---
 src/material/slider/slider.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index 0805afed5955..c77f879ddf65 100644
--- a/src/material/slider/slider.scss
+++ b/src/material/slider/slider.scss
@@ -105,6 +105,11 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots());
   pointer-events: none;
   position: absolute;
   transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  box-sizing: border-box;
 
   @include token-utils.use-tokens($_mat-slots...) {
     @include token-utils.create-token-slot(transform, value-indicator-container-transform);
@@ -125,6 +130,10 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots());
   transform-origin: bottom;
   opacity: 1;
   transition: transform 100ms cubic-bezier(0.4, 0, 1, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 
   // Stop parent word-break from altering
   // the word-break of the value indicator.