fix(slider): make tickmarks visible when slider is disabled

PiperOrigin-RevId: 564880169

slider/internal/_slider.scss

@@ -148,7 +148,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     touch-action: none;
   }
 
-  .track {
+  .track,
+  .tickmarks {
     position: absolute;
     inset: 0;
     display: flex;
@@ -157,8 +158,10 @@ $_md-sys-shape: tokens.md-sys-shape-values();
 
   // inactive-track
   .track::before,
+  .tickmarks::before,
   // active-track
-  .track::after {
+  .track::after,
+  .tickmarks::after {
     position: absolute;
     content: '';
     // pad the track inward by half the ripple size offset by the tick container size.
@@ -176,15 +179,19 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   // inactive-track
-  .track::before {
+  .track::before,
+  .tickmarks::before {
     block-size: var(--_inactive-track-height);
     border-radius: var(--_inactive-track-shape);
+  }
+
+  .track::before {
     background-color: var(--_inactive-track-color);
   }
 
-  .track.tickmarks::before {
+  .tickmarks::before {
     background-image: _get-tick-image(
-      'var(--_with-tick-marks-inactive-container-color)'
+      var(--_with-tick-marks-inactive-container-color)
     );
   }
 
@@ -199,34 +206,43 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   // active-track
-  .track::after {
+  .track::after,
+  .tickmarks::after {
     block-size: var(--_active-track-height);
     border-radius: var(--_active-track-shape);
     clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);
+  }
+
+  .track::after {
     background-color: var(--_active-track-color);
   }
 
+  .tickmarks::after {
+    background-image: _get-tick-image(
+      var(--_with-tick-marks-active-container-color)
+    );
+  }
+
   // rtl for active track clipping
   @each $_rtl-selectors in _get-rtl-selectors('.track', '::after') {
     #{$_rtl-selectors} {
       clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
     }
   }
 
-  .track.tickmarks::after {
-    background-image: _get-tick-image(
-      'var(--_with-tick-marks-active-container-color)'
-    );
+  @each $_rtl-selectors in _get-rtl-selectors('.tickmarks', '::after') {
+    #{$_rtl-selectors} {
+      clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
+    }
   }
 
   :host([disabled]) .track::after {
     background-color: var(--_disabled-active-track-color);
   }
 
-  :host([disabled]) .track.tickmarks::before,
-  :host([disabled]) .track.tickmarks::after {
+  :host([disabled]) .tickmarks::before {
     background-image: _get-tick-image(
-      'var(--_with-tick-marks-disabled-container-color)'
+      var(--_with-tick-marks-disabled-container-color)
     );
   }
 

slider/internal/forced-colors-styles.scss

@@ -49,7 +49,7 @@
   }
 
   // inactive-track
-  .track.tickmarks::before {
+  .tickmarks::before {
     // A url must be used when forced-colors is active as it's the only value
     // that is respected. The radial-gradient is not displayed. This is a
     // stop-gap solution so ticks are displayed at all when forced-colors is
@@ -70,11 +70,19 @@
   }
 
   // active-track
-  .track.tickmarks::after {
+  .tickmarks::after {
     // See inactive-track documentation for background-image.
     // stylelint-disable function-url-quotes -- SVG data URI
     // TODO(b/298051946): Tick marks cannot be resized in HCM
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/svg%3E");
     // stylelint-enable function-url-quotes
   }
+
+  :host([disabled]) .tickmarks::before {
+    // TODO(b/298051946): Tick marks cannot be resized in HCM
+    // stylelint-disable function-url-quotes -- SVG data URI
+    // SVG is optimized for data URI (https://codepen.io/tigt/post/optimizing-svgs-in-data-uris)
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='Canvas'%3E%3Ccircle cx='2' cy='2'  r='1'/%3E%3C/svg%3E");
+    // stylelint-enable function-url-quotes
+  }
 }

slider/internal/slider.ts

@@ -416,8 +416,10 @@ export class Slider extends LitElement {
   }
 
   private renderTrack() {
-    const trackClasses = {'tickmarks': this.ticks};
-    return html`<div class="track ${classMap(trackClasses)}"></div>`;
+    return html`
+        <div class="track"></div>
+        ${this.ticks ? html`<div class="tickmarks"></div>` : nothing}
+      `;
   }
 
   private renderLabel(value: string) {

tokens/_md-comp-slider.scss

@@ -68,8 +68,10 @@ $unsupported-tokens: (
   'track-elevation',
   // for efficiency, tick marks are rendered as radial-gradients and
   // have more limited customization
-  'with-tick-marks-active-container-opacity',
   'with-tick-marks-container-shape',
+  // Due to how opacity is multiplied together in the browser, using
+  // these tokens results in low contrast tick marks.
+  'with-tick-marks-active-container-opacity',
   'with-tick-marks-disabled-container-opacity',
   'with-tick-marks-inactive-container-opacity',
   // focus tokens no longer used.