feat: adjust slider's sliding range (microsoft#32350)

miroslavstastny · Aug 27, 2024 · bfa731b · bfa731b
1 parent 4b0f902
commit bfa731b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 26 deletions.
diff --git a/change/@fluentui-web-components-967265b4-5017-4bbb-b7cf-d88586cda5a9.json b/change/@fluentui-web-components-967265b4-5017-4bbb-b7cf-d88586cda5a9.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: adjust slider sliding range",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
@@ -28,9 +28,12 @@ export const styles = css`
     --track-margin-inline: calc(var(--thumb-size) / 2);
     --track-size: 4px;
     --track-overhang: calc(var(--track-size) / -2);
+    --rail-color: ${colorCompoundBrandBackground};
+    --track-color: ${colorNeutralStrokeAccessible};
     --slider-direction: 90deg;
     --border-radius: ${borderRadiusMedium};
     --step-marker-inset: var(--track-overhang) -1px;
+
     position: relative;
     align-items: center;
     justify-content: center;
@@ -44,6 +47,19 @@ export const styles = css`
     grid-template-columns: var(--track-margin-inline) 1fr var(--track-margin-inline);
   }
 
+  :host(:hover) {
+    --rail-color: ${colorCompoundBrandBackgroundHover};
+  }
+
+  :host(:active) {
+    --rail-color: ${colorCompoundBrandBackgroundPressed};
+  }
+
+  :host(:disabled) {
+    --rail-color: ${colorNeutralForegroundDisabled};
+    --track-color: ${colorNeutralBackgroundDisabled};
+  }
+
   :host(:not(:disabled)) {
     cursor: pointer;
   }
@@ -75,22 +91,44 @@ export const styles = css`
     outline: 1px solid ${colorStrokeFocus1};
   }
 
+  :host:after,
   .track {
-    position: relative;
-    background-color: ${colorNeutralStrokeAccessible};
+    height: var(--track-size);
+    width: 100%;
+  }
+
+  :host:after {
+    background-image: linear-gradient(
+      var(--slider-direction),
+      var(--rail-color) 0%,
+      var(--rail-color) 50%,
+      var(--track-color) 50.1%,
+      var(--track-color) 100%
+    );
     border-radius: var(--border-radius);
+    content: '';
+    grid-row: 1 / -1;
+    grid-column: 1 / -1;
+  }
+
+  .track {
+    position: relative;
+    background-color: var(--track-color);
     grid-row: 2 / 2;
     grid-column: 2 / 2;
-    width: 100%;
-    height: var(--track-size);
     forced-color-adjust: none;
+    overflow: hidden;
+  }
+
+  :host(${verticalState})::after,
+  :host(${verticalState}) .track {
+    height: 100%;
+    width: var(--track-size);
   }
 
   :host(${verticalState}) .track {
     top: var(--track-overhang);
     bottom: var(--track-overhang);
-    width: var(--track-size);
-    height: 100%;
   }
 
   .track::before {
@@ -151,26 +189,7 @@ export const styles = css`
 
   .thumb,
   .track::before {
-    background-color: ${colorCompoundBrandBackground};
-  }
-
-  :host(:hover) .thumb,
-  :host(:hover) .track::before {
-    background-color: ${colorCompoundBrandBackgroundHover};
-  }
-
-  :host(:active) .thumb,
-  :host(:active) .track::before {
-    background-color: ${colorCompoundBrandBackgroundPressed};
-  }
-
-  :host(:disabled) .track {
-    background-color: ${colorNeutralBackgroundDisabled};
-  }
-
-  :host(:disabled) .thumb,
-  :host(:disabled) .track::before {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(--rail-color);
   }
 `.withBehaviors(
   forcedColorsStylesheetBehavior(css`