feat(slider): Two handle slider style update

sangeethababu9223 · Feb 28, 2024 · 069ae29 · 069ae29
1 parent 30767a7
commit 069ae29
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git 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
@@ -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>