From 069ae2942fda1d598414b0faf5c951cc3555f8c0 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Wed, 28 Feb 2024 16:58:51 +0530
Subject: [PATCH] feat(slider): Two handle slider style update

---
 .../src/components/slider/slider.scss         | 10 ++++++-
 .../src/components/slider/slider.ts           | 26 ++++++++++++++-----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/carbon-web-components/src/components/slider/slider.scss b/packages/carbon-web-components/src/components/slider/slider.scss
index 1e580f356e6..6423e8b2bf5 100644
--- a/packages/carbon-web-components/src/components/slider/slider.scss
+++ b/packages/carbon-web-components/src/components/slider/slider.scss
@@ -33,7 +33,7 @@ $css--plex: true !default;
 
     transform: translate(-50%, -50%) #{'/*rtl:ignore*/'};
   }
-  
+
   .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}-ce--slider__filled-track-container
     .#{$prefix}--slider__filled-track {
@@ -53,3 +53,11 @@ $css--plex: true !default;
     background-color: transparent;
   }
 }
+.#{$prefix}--slider__thumb-wrapper:focus-within
+  .#{$prefix}--slider__thumb-icon {
+  display: none;
+}
+.#{$prefix}--slider__thumb-wrapper:focus-within
+  .#{$prefix}--slider__thumb-icon--focus {
+  display: block;
+}
diff --git a/packages/carbon-web-components/src/components/slider/slider.ts b/packages/carbon-web-components/src/components/slider/slider.ts
index f37816b19d1..cb1fb8e8d9f 100644
--- a/packages/carbon-web-components/src/components/slider/slider.ts
+++ b/packages/carbon-web-components/src/components/slider/slider.ts
@@ -898,13 +898,25 @@ class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
               `
             : html``}
           <div id="track" class="${prefix}--slider__track"></div>
-          <div class="${prefix}-ce--slider__filled-track-container">
-            <div
-              class="${prefix}--slider__filled-track"
-              style="transform: ${valueUpper
-                ? `translate(${rate * 100}%, -50%) scaleX(${rateUpper - rate})`
-                : `translate(0%, -50%) scaleX(${rate})`}"></div>
-          </div>
+          ${valueUpper
+            ? html`
+                <div
+                  class="${prefix}--slider__filled-track"
+                  style="transform: ${valueUpper
+                    ? `translate(${rate * 100}%, -50%) scaleX(${
+                        rateUpper - rate
+                      })`
+                    : `translate(0%, -50%) scaleX(${rate})`}"></div>
+              `
+            : html` <div class="${prefix}-ce--slider__filled-track-container">
+                <div
+                  class="${prefix}--slider__filled-track"
+                  style="transform: ${valueUpper
+                    ? `translate(${rate * 100}%, -50%) scaleX(${
+                        rateUpper - rate
+                      })`
+                    : `translate(0%, -50%) scaleX(${rate})`}"></div>
+              </div>`}
         </div>
         <span class="${prefix}--slider__range-label">
           <slot name="max-text">${formatMaxText(max, maxLabel)}</slot>