From 2c5897f7e179b78d37c6b1b31dfd62b7ea0543ad Mon Sep 17 00:00:00 2001
From: Daniel Fiala <danfiala23@gmail.com>
Date: Wed, 9 Oct 2024 12:42:35 +0000
Subject: [PATCH 1/6] feat(slider): update slider component styles and types

---
 docs/components/slider.md          | 64 ++++++++++++++++++++++++++++++
 slider/internal/_slider.scss       | 55 +++++++++++++++++++------
 slider/internal/slider.ts          | 16 +++++---
 tokens/v0_192/_md-comp-slider.scss | 16 ++++----
 4 files changed, 125 insertions(+), 26 deletions(-)

diff --git a/docs/components/slider.md b/docs/components/slider.md
index 4f34d2e1ab..0ab99fc2ef 100644
--- a/docs/components/slider.md
+++ b/docs/components/slider.md
@@ -59,6 +59,70 @@ Sliders can use icons or labels to represent a numeric or relative scale.
 
 <!-- catalog-only-end -->
 
+## Types
+
+<!-- no-catalog-start -->
+
+![The 5 types of common buttons](images/button/types.webp "Elevated, filled, filled tonal, outlined, and text buttons")
+
+<!-- no-catalog-end -->
+<!-- catalog-only-start -->
+
+<!--
+
+<div class="figure-wrapper">
+  <figure
+      class="types-image"
+      style="justify-content:center;"
+      title="Elevated, filled, filled tonal, outlined, and text buttons"
+      aria-label="The 5 types of common buttons">
+    <style>
+      .types-image .wrapper,
+      .types-image .wrapper > * {
+        display: flex;
+        padding: 24px;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+      .types-image .wrapper > * {
+        flex-direction: column;
+        align-items: center;
+        padding-inline: 16px;
+      }
+      .types-image span {
+        display: inline-flex;
+        background-color: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        padding: 8px;
+        margin-block-start: 8px;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+    <div class="wrapper">
+      <div>
+        <md-slider></md-slider>
+        <span>1</span>
+      </div>
+      <div>
+        <md-slider ticks labeled value="5" min="0" max="10"></md-slider>
+        <span>2</span>
+      </div>
+      <div>
+        <md-slider range labeled value-start="25" value-end="75"></md-slider>
+        <span>3</span>
+      </div>
+    </div>
+  </figure>
+</div>
+
+-->
+
+<!-- catalog-only-end -->
+
 ## Usage
 
 Sliders may be continuous or discrete, and may also represent a range.
diff --git a/slider/internal/_slider.scss b/slider/internal/_slider.scss
index e1f192b7d6..b5e8c12d86 100644
--- a/slider/internal/_slider.scss
+++ b/slider/internal/_slider.scss
@@ -129,13 +129,37 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     inset: 0;
     display: flex;
     align-items: center;
+    padding-inline: calc(var(--_state-layer-size) / 2);
+  }
+
+  .track-start {
+    background: var(--_active-track-color);
+    block-size: var(--_active-track-height);
+    border-top-left-radius: var(--_active-track-shape);
+    border-bottom-left-radius: var(--_active-track-shape);
+    border-top-right-radius: if(var(--_start-fraction) == 1, var(--_active-track-shape), 5000px);
+    border-bottom-right-radius: if(var(--_start-fraction) == 1, var(--_active-track-shape), 5000px);
+    inline-size: calc(100%*var(--_start-fraction) - var(--_state-layer-size) / 2);
+    margin-inline-end: calc(var(--_state-layer-size) / 2);
+  }
+
+  .track-middle {
+    background: var(--_active-track-color);
+    block-size: var(--_active-track-height);
+    border-radius: 0;
+    inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)) - 6px);
+    margin-inline-start: 6px;
+  }
+
+  .track-end {
+    background: var(--_inactive-track-color);
+    block-size: var(--_inactive-track-height);
+    border-radius: var(--_inactive-track-shape);
+    inline-size: calc(100% * (1 - var(--_end-fraction)) - 6px);
+    margin-inline-start: auto;
   }
 
-  // inactive-track
-  .track::before,
   .tickmarks::before,
-  // active-track
-  .track::after,
   .tickmarks::after {
     position: absolute;
     content: '';
@@ -168,6 +192,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background-image: _get-tick-image(
       var(--_with-tick-marks-inactive-container-color)
     );
+    margin-left: 4px;
+    margin-right: 4px;
   }
 
   :host([disabled]) .track::before {
@@ -196,6 +222,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background-image: _get-tick-image(
       var(--_with-tick-marks-active-container-color)
     );
+    margin-left: 4px;
+    margin-right: 4px;
   }
 
   // rtl for active track clipping
@@ -309,7 +337,10 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     position: absolute;
     box-sizing: border-box;
     display: flex;
-    padding: 4px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
     place-content: center;
     place-items: center;
     border-radius: map.get($_md-sys-shape, 'corner-full');
@@ -347,14 +378,14 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   // triangle below label
-  .label::before {
+  //.label::before {
     // Note, sizing carefully estimated to create an ice cream cone shape.
-    $_triangleSize: calc(var(--_label-container-height) / 2);
-    inline-size: $_triangleSize;
-    block-size: $_triangleSize;
-    bottom: calc(var(--_label-container-height) / -10);
-    transform: rotate(45deg);
-  }
+  //  $_triangleSize: calc(var(--_label-container-height) / 2);
+  //  inline-size: $_triangleSize;
+  //  block-size: $_triangleSize;
+  //  bottom: calc(var(--_label-container-height) / -10);
+  //  transform: rotate(45deg);
+  //}
 
   // fits inside label and occludes top half of triangle.
   .label::after {
diff --git a/slider/internal/slider.ts b/slider/internal/slider.ts
index 997859c1a9..034dc703b0 100644
--- a/slider/internal/slider.ts
+++ b/slider/internal/slider.ts
@@ -338,7 +338,7 @@ export class Slider extends sliderBaseClass {
     const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
     const containerStyles = {
       // for clipping inputs and active track.
-      '--_start-fraction': String(startFraction),
+      '--_start-fraction': String(this.range ? startFraction : endFraction),
       '--_end-fraction': String(endFraction),
       // for generating tick marks
       '--_tick-count': String(range / step),
@@ -403,11 +403,19 @@ export class Slider extends sliderBaseClass {
 
   private renderTrack() {
     return html`
-      <div class="track"></div>
+      <div class="track">
+        ${this.renderTrackPart('start')}
+        ${when(this.range, () => this.renderTrackPart('middle'))}
+        ${this.renderTrackPart('end')}
+      </div>
       ${this.ticks ? html`<div class="tickmarks"></div>` : nothing}
     `;
   }
 
+  private renderTrackPart(part: string) {
+    return html`<div class="track-${part}"></div>`;
+  }
+
   private renderLabel(value: string) {
     return html`<div class="label" aria-hidden="true">
       <span class="labelContent" part="label">${value}</span>
@@ -434,10 +442,6 @@ export class Slider extends sliderBaseClass {
         isOverlapping,
       })}">
       <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
-      <md-ripple
-        for=${name}
-        class=${name}
-        ?disabled=${this.disabled}></md-ripple>
       <div class="handleNub">
         <md-elevation part="elevation"></md-elevation>
       </div>
diff --git a/tokens/v0_192/_md-comp-slider.scss b/tokens/v0_192/_md-comp-slider.scss
index dcc74f699f..4c63cf6e9f 100644
--- a/tokens/v0_192/_md-comp-slider.scss
+++ b/tokens/v0_192/_md-comp-slider.scss
@@ -35,7 +35,7 @@ $_default: (
 @function values($deps: $_default, $exclude-hardcoded-values: false) {
   @return (
     'active-track-color': map.get($deps, 'md-sys-color', 'primary'),
-    'active-track-height': if($exclude-hardcoded-values, null, 4px),
+    'active-track-height': if($exclude-hardcoded-values, null, 16px),
     'active-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),
     'disabled-active-track-color': map.get($deps, 'md-sys-color', 'on-surface'),
     'disabled-active-track-opacity': if($exclude-hardcoded-values, null, 0.38),
@@ -51,22 +51,22 @@ $_default: (
       map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
     'handle-color': map.get($deps, 'md-sys-color', 'primary'),
     'handle-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
-    'handle-height': if($exclude-hardcoded-values, null, 20px),
+    'handle-height': if($exclude-hardcoded-values, null, 44px),
     'handle-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
     'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'),
-    'handle-width': if($exclude-hardcoded-values, null, 20px),
+    'handle-width': if($exclude-hardcoded-values, null, 4px),
     'hover-handle-color': map.get($deps, 'md-sys-color', 'primary'),
     'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
     'hover-state-layer-opacity':
       map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
     'inactive-track-color':
       map.get($deps, 'md-sys-color', 'surface-container-highest'),
-    'inactive-track-height': if($exclude-hardcoded-values, null, 4px),
+    'inactive-track-height': if($exclude-hardcoded-values, null, 16px),
     'inactive-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),
-    'label-container-color': map.get($deps, 'md-sys-color', 'primary'),
+    'label-container-color': map.get($deps, 'md-sys-color', 'inverse-surface'),
     'label-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'),
     'label-container-height': if($exclude-hardcoded-values, null, 28px),
-    'label-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'),
+    'label-label-text-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'),
     'label-label-text-font':
       map.get($deps, 'md-sys-typescale', 'label-medium-font'),
     'label-label-text-line-height':
@@ -93,7 +93,7 @@ $_default: (
     'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
     'pressed-state-layer-opacity':
       map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
-    'state-layer-size': if($exclude-hardcoded-values, null, 40px),
+    'state-layer-size': if($exclude-hardcoded-values, null, 16px),
     'track-elevation': map.get($deps, 'md-sys-elevation', 'level0'),
     'with-overlap-handle-outline-color':
       map.get($deps, 'md-sys-color', 'on-primary'),
@@ -105,7 +105,7 @@ $_default: (
       if($exclude-hardcoded-values, null, 0.38),
     'with-tick-marks-container-shape':
       map.get($deps, 'md-sys-shape', 'corner-full'),
-    'with-tick-marks-container-size': if($exclude-hardcoded-values, null, 2px),
+    'with-tick-marks-container-size': if($exclude-hardcoded-values, null, 4px),
     'with-tick-marks-disabled-container-color':
       map.get($deps, 'md-sys-color', 'on-surface'),
     'with-tick-marks-disabled-container-opacity':

From b63b08d7800093ad79ad6dc0b85586f6b7e70e2d Mon Sep 17 00:00:00 2001
From: Daniel Fiala <danfiala23@gmail.com>
Date: Wed, 9 Oct 2024 19:12:31 +0200
Subject: [PATCH 2/6] fix(slider): fixes to slider track

---
 slider/internal/_slider.scss | 129 ++++++++++++++++++-----------------
 1 file changed, 66 insertions(+), 63 deletions(-)

diff --git a/slider/internal/_slider.scss b/slider/internal/_slider.scss
index b5e8c12d86..2ef3e60e22 100644
--- a/slider/internal/_slider.scss
+++ b/slider/internal/_slider.scss
@@ -37,26 +37,26 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   // size to account for always showing the active track on the outside
   // edge of the last tick.
   $_active-track-max-clip: calc(
-    100% - var(--_with-tick-marks-container-size) * 2
+          100% - var(--_with-tick-marks-container-size) * 2
   );
   // When the start fraction is !0, add clipping by the tick container size
   $_start-fraction-not-zero: min(var(--_start-fraction) * 1e9, 1);
   $_active-track-start-offset: calc(
-    var(--_with-tick-marks-container-size) * $_start-fraction-not-zero
+          var(--_with-tick-marks-container-size) * $_start-fraction-not-zero
   );
   $_active-track-start-clip: calc(
-    $_active-track-start-offset + $_active-track-max-clip *
-      var(--_start-fraction)
+          $_active-track-start-offset + $_active-track-max-clip *
+          var(--_start-fraction)
   );
 
   // When the end fraction is !1, add clipping by the tick container size
   $_end-fraction-not-one: min((1 - var(--_end-fraction)) * 1e9, 1);
   $_active-track-end-offset: calc(
-    var(--_with-tick-marks-container-size) * $_end-fraction-not-one
+          var(--_with-tick-marks-container-size) * $_end-fraction-not-one
   );
   $_active-track-end-clip: calc(
-    $_active-track-end-offset + $_active-track-max-clip *
-      (1 - var(--_end-fraction))
+          $_active-track-end-offset + $_active-track-max-clip *
+          (1 - var(--_end-fraction))
   );
 
   :host {
@@ -74,17 +74,17 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     min-inline-size: 200px;
 
     @include elevation.theme(
-      (
-        level: var(--_handle-elevation),
-        shadow-color: var(--_handle-shadow-color),
-      )
+                    (
+                            level: var(--_handle-elevation),
+                            shadow-color: var(--_handle-shadow-color),
+                    )
     );
   }
 
   md-focus-ring {
     height: 48px;
     inset: unset;
-    width: 48px;
+    width: 8px;
   }
 
   md-elevation {
@@ -105,9 +105,9 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     opacity: var(--_disabled-active-track-opacity);
 
     @include elevation.theme(
-      (
-        level: var(--_disabled-handle-elevation),
-      )
+                    (
+                            level: var(--_disabled-handle-elevation),
+                    )
     );
   }
 
@@ -139,42 +139,59 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     border-bottom-left-radius: var(--_active-track-shape);
     border-top-right-radius: if(var(--_start-fraction) == 1, var(--_active-track-shape), 5000px);
     border-bottom-right-radius: if(var(--_start-fraction) == 1, var(--_active-track-shape), 5000px);
-    inline-size: calc(100%*var(--_start-fraction) - var(--_state-layer-size) / 2);
+    inline-size: calc(100% * var(--_start-fraction) - var(--_state-layer-size) / 2);
     margin-inline-end: calc(var(--_state-layer-size) / 2);
   }
 
+  input.start:focus ~ .track .track-start,
+  input.end:focus ~ .track .track-start {
+    width: calc(100% * var(--_start-fraction) - var(--_state-layer-size) / 2 + 2px);
+  }
+
   .track-middle {
     background: var(--_active-track-color);
     block-size: var(--_active-track-height);
-    border-radius: 0;
+    border-radius: 5000px;
     inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)) - 6px);
     margin-inline-start: 6px;
   }
 
+  input.start:focus ~ .track .track-middle,
+  input.end:focus ~ .track .track-middle {
+    width: calc(100% * (var(--_end-fraction) - var(--_start-fraction)) - 6px);
+  }
+
   .track-end {
     background: var(--_inactive-track-color);
     block-size: var(--_inactive-track-height);
-    border-radius: var(--_inactive-track-shape);
-    inline-size: calc(100% * (1 - var(--_end-fraction)) - 6px);
+    border-top-right-radius: var(--_inactive-track-shape);
+    border-bottom-right-radius: var(--_inactive-track-shape);
+    border-top-left-radius: if(var(--_end-fraction) == 0, var(--_inactive-track-shape), 5000px);
+    border-bottom-left-radius: if(var(--_end-fraction) == 0, var(--_inactive-track-shape), 5000px);
+    inline-size: calc(100% * (1 - var(--_end-fraction)) - var(--_state-layer-size) / 2);
     margin-inline-start: auto;
   }
 
+  input.start:focus ~ .track .track-end,
+  input.end:focus ~ .track .track-end {
+    width: calc(100% * (1 - var(--_end-fraction)) - var(--_state-layer-size) / 2 + 2px);
+  }
+
   .tickmarks::before,
   .tickmarks::after {
     position: absolute;
     content: '';
     // pad the track inward by half the ripple size offset by the tick container size.
     $_track-padding: calc(
-      (var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size)
+            (var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size)
     );
     inset-inline-start: $_track-padding;
     inset-inline-end: $_track-padding;
 
     // ticks size: set here since it does not change.
     background-size: calc(
-        (100% - var(--_with-tick-marks-container-size) * 2) / var(--_tick-count)
-      )
-      100%;
+            (100% - var(--_with-tick-marks-container-size) * 2) / var(--_tick-count)
+    ) 100%;
   }
 
   // inactive-track
@@ -190,7 +207,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
 
   .tickmarks::before {
     background-image: _get-tick-image(
-      var(--_with-tick-marks-inactive-container-color)
+                    var(--_with-tick-marks-inactive-container-color)
     );
     margin-left: 4px;
     margin-right: 4px;
@@ -200,8 +217,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     // Note, the active track opacity is applied to the entire host,
     // so the inactive track is calc'd to compensate.
     opacity: calc(
-      (1 / var(--_disabled-active-track-opacity)) *
-        var(--_disabled-inactive-track-opacity)
+            (1 / var(--_disabled-active-track-opacity)) *
+            var(--_disabled-inactive-track-opacity)
     );
     background: var(--_disabled-inactive-track-color);
   }
@@ -220,7 +237,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
 
   .tickmarks::after {
     background-image: _get-tick-image(
-      var(--_with-tick-marks-active-container-color)
+                    var(--_with-tick-marks-active-container-color)
     );
     margin-left: 4px;
     margin-right: 4px;
@@ -241,7 +258,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
 
   :host([disabled]) .tickmarks::before {
     background-image: _get-tick-image(
-      var(--_with-tick-marks-disabled-container-color)
+                    var(--_with-tick-marks-disabled-container-color)
     );
   }
 
@@ -298,6 +315,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   input.end:focus ~ .handleContainerPadded .handle.end > .handleNub,
   input.start:focus ~ .handleContainerPadded .handle.start > .handleNub {
     background: var(--_focus-handle-color);
+    width: 2px;
   }
 
   // prefix classes exist to overcome specificity of focus styling.
@@ -315,13 +333,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   .onTop.isOverlapping {
     .label,
     .label::before {
-      outline: var(--_with-overlap-handle-outline-color) solid
-        var(--_with-overlap-handle-outline-width);
+      outline: var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width);
     }
 
     .handleNub {
-      border: var(--_with-overlap-handle-outline-color) solid
-        var(--_with-overlap-handle-outline-width);
+      border: var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width);
     }
   }
 
@@ -351,12 +367,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     line-height: var(--_label-text-line-height);
     font-weight: var(--_label-text-weight);
 
-    inset-block-end: 100%;
+    inset-block-end: calc(100% + 18px);
     min-inline-size: var(--_label-container-height);
     min-block-size: var(--_label-container-height);
     background: var(--_label-container-color);
-    transition: transform map.get($_md-sys-motion, 'duration-short2')
-      map.get($_md-sys-motion, 'easing-emphasized');
+    transition: transform map.get($_md-sys-motion, 'duration-short2') map.get($_md-sys-motion, 'easing-emphasized');
     transform-origin: center bottom;
     transform: scale(0);
   }
@@ -377,16 +392,6 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background: inherit;
   }
 
-  // triangle below label
-  //.label::before {
-    // Note, sizing carefully estimated to create an ice cream cone shape.
-  //  $_triangleSize: calc(var(--_label-container-height) / 2);
-  //  inline-size: $_triangleSize;
-  //  block-size: $_triangleSize;
-  //  bottom: calc(var(--_label-container-height) / -10);
-  //  transform: rotate(45deg);
-  //}
-
   // fits inside label and occludes top half of triangle.
   .label::after {
     inset: 0px;
@@ -454,11 +459,9 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   // Clip the inputs to the space left/right of the center point between the
   // values so the right input gets pointer events.
   $_clip-to-start: calc(
-    var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) *
-      (
-        var(--_start-fraction) +
-          ((var(--_end-fraction) - var(--_start-fraction)) / 2)
-      )
+          var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) *
+          (var(--_start-fraction) +
+          ((var(--_end-fraction) - var(--_start-fraction)) / 2))
   );
 
   $_clip-to-end: calc(100% - $_clip-to-start);
@@ -490,12 +493,12 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   // Ripple
   .handle {
     @include ripple.theme(
-      (
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
-      )
+                    (
+                            hover-color: var(--_hover-state-layer-color),
+                            hover-opacity: var(--_hover-state-layer-opacity),
+                            pressed-color: var(--_pressed-state-layer-color),
+                            pressed-opacity: var(--_pressed-state-layer-opacity),
+                    )
     );
   }
 
@@ -509,10 +512,10 @@ $_md-sys-shape: tokens.md-sys-shape-values();
 // Returns a background-image with sized circular ticks of the given color.
 @function _get-tick-image($color) {
   @return radial-gradient(
-    circle at var(--_with-tick-marks-container-size) center,
-    #{$color} 0,
-    #{$color} calc(var(--_with-tick-marks-container-size) / 2),
-    transparent calc(var(--_with-tick-marks-container-size) / 2)
+                  circle at var(--_with-tick-marks-container-size) center,
+                  #{$color} 0,
+                  #{$color} calc(var(--_with-tick-marks-container-size) / 2),
+                  transparent calc(var(--_with-tick-marks-container-size) / 2)
   );
 }
 
@@ -535,11 +538,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   input.#{$start-or-end}::-webkit-slider-thumb {
     // AKA `layout-shift` in the equations above
     --_track-and-knob-padding: calc(
-      (var(--_state-layer-size) - var(--_handle-width)) / 2
+            (var(--_state-layer-size) - var(--_handle-width)) / 2
     );
     --_x-translate: calc(
-      var(--_track-and-knob-padding) - 2 * var(--_#{$start-or-end}-fraction) *
-        var(--_track-and-knob-padding)
+            var(--_track-and-knob-padding) - 2 * var(--_#{$start-or-end}-fraction) *
+            var(--_track-and-knob-padding)
     );
     transform: translateX(var(--_x-translate));
   }

From f533a4137bac0a01d0ff5c552a43afe6f143cc25 Mon Sep 17 00:00:00 2001
From: Daniel Fiala <danfiala23@gmail.com>
Date: Thu, 10 Oct 2024 12:10:31 +0000
Subject: [PATCH 3/6] feat(slider): update slider component styles and types

---
 docs/components/slider.md          | 12 ++--
 slider/internal/_slider.scss       | 92 ++++++++++++++++++++++--------
 slider/internal/slider.ts          | 12 ++--
 tokens/v0_192/_md-comp-slider.scss |  4 +-
 4 files changed, 84 insertions(+), 36 deletions(-)

diff --git a/docs/components/slider.md b/docs/components/slider.md
index 0ab99fc2ef..19caf7da68 100644
--- a/docs/components/slider.md
+++ b/docs/components/slider.md
@@ -63,7 +63,7 @@ Sliders can use icons or labels to represent a numeric or relative scale.
 
 <!-- no-catalog-start -->
 
-![The 5 types of common buttons](images/button/types.webp "Elevated, filled, filled tonal, outlined, and text buttons")
+![The 5 types of common buttons](images/button/types.webp "Continous, discrete, range sliders")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -104,15 +104,15 @@ Sliders can use icons or labels to represent a numeric or relative scale.
     </style>
     <div class="wrapper">
       <div>
-        <md-slider></md-slider>
+        <md-slider min="0" max="100" value="50"></md-slider>
         <span>1</span>
       </div>
       <div>
-        <md-slider ticks labeled value="5" min="0" max="10"></md-slider>
+        <md-slider step="5" ticks min="0" max="20"></md-slider>
         <span>2</span>
       </div>
       <div>
-        <md-slider range labeled value-start="25" value-end="75"></md-slider>
+        <md-slider range value-start="25" value-end="50"></md-slider>
         <span>3</span>
       </div>
     </div>
@@ -123,6 +123,10 @@ Sliders can use icons or labels to represent a numeric or relative scale.
 
 <!-- catalog-only-end -->
 
+1.  [Continuous](#continuous)
+1.  [Discrete](#discrete)
+1.  [Range](#range)
+
 ## Usage
 
 Sliders may be continuous or discrete, and may also represent a range.
diff --git a/slider/internal/_slider.scss b/slider/internal/_slider.scss
index 2ef3e60e22..098e9cb43a 100644
--- a/slider/internal/_slider.scss
+++ b/slider/internal/_slider.scss
@@ -46,7 +46,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   );
   $_active-track-start-clip: calc(
           $_active-track-start-offset + $_active-track-max-clip *
-          var(--_start-fraction)
+          var(--_start-fraction) + 4px
   );
 
   // When the end fraction is !1, add clipping by the tick container size
@@ -56,7 +56,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   );
   $_active-track-end-clip: calc(
           $_active-track-end-offset + $_active-track-max-clip *
-          (1 - var(--_end-fraction))
+          (1 - var(--_end-fraction)) + 4px
   );
 
   :host {
@@ -123,7 +123,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     touch-action: none;
   }
 
-  .track,
+  .trackPadded,
   .tickmarks {
     position: absolute;
     inset: 0;
@@ -133,48 +133,60 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   .track-start {
+    position: absolute;
     background: var(--_active-track-color);
     block-size: var(--_active-track-height);
     border-top-left-radius: var(--_active-track-shape);
     border-bottom-left-radius: var(--_active-track-shape);
-    border-top-right-radius: if(var(--_start-fraction) == 1, var(--_active-track-shape), 5000px);
-    border-bottom-right-radius: if(var(--_start-fraction) == 1, var(--_active-track-shape), 5000px);
+    border-top-right-radius: 4000px;
+    border-bottom-right-radius: 4000px;
+    inline-size: calc(100% * var(--_end-fraction) - var(--_state-layer-size) / 2);
+    left: 0px;
+  }
+
+  .ranged .track-start {
+    background: var(--_inactive-track-color);
     inline-size: calc(100% * var(--_start-fraction) - var(--_state-layer-size) / 2);
-    margin-inline-end: calc(var(--_state-layer-size) / 2);
+    background-image: _get-tick-image(var(--_with-tick-marks-inactive-container-color), calc(var(--_with-tick-marks-container-size) + 2px));
   }
 
-  input.start:focus ~ .track .track-start,
   input.end:focus ~ .track .track-start {
-    width: calc(100% * var(--_start-fraction) - var(--_state-layer-size) / 2 + 2px);
+    inline-size: calc(100% * var(--_start-fraction) - var(--_state-layer-size) / 2 + 2px);
   }
 
   .track-middle {
+    position: absolute;
     background: var(--_active-track-color);
     block-size: var(--_active-track-height);
-    border-radius: 5000px;
-    inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)) - 6px);
-    margin-inline-start: 6px;
+    border-radius: 4px;
+    inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)) - var(--_state-layer-size));
+    left: calc(100% * var(--_start-fraction) + var(--_state-layer-size) / 2);
+  }
+
+  input.start:focus ~ .track .track-middle {
+    margin-inline-start: calc(var(--_state-layer-size) / 2 - 2px);
   }
 
-  input.start:focus ~ .track .track-middle,
   input.end:focus ~ .track .track-middle {
-    width: calc(100% * (var(--_end-fraction) - var(--_start-fraction)) - 6px);
+    inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)) - var(--_state-layer-size) / 2);
+    margin-inline-end: calc(var(--_state-layer-size) / 2 - 2px);
   }
 
   .track-end {
+    position: absolute;
     background: var(--_inactive-track-color);
     block-size: var(--_inactive-track-height);
     border-top-right-radius: var(--_inactive-track-shape);
     border-bottom-right-radius: var(--_inactive-track-shape);
-    border-top-left-radius: if(var(--_end-fraction) == 0, var(--_inactive-track-shape), 5000px);
-    border-bottom-left-radius: if(var(--_end-fraction) == 0, var(--_inactive-track-shape), 5000px);
+    border-top-left-radius: 4000px;
+    border-bottom-left-radius: 4000px;
     inline-size: calc(100% * (1 - var(--_end-fraction)) - var(--_state-layer-size) / 2);
-    margin-inline-start: auto;
+    right: 0px;
+    background-image: _get-tick-image(var(--_with-tick-marks-inactive-container-color), calc(100% - var(--_with-tick-marks-container-size) - 2px));
   }
 
-  input.start:focus ~ .track .track-end,
   input.end:focus ~ .track .track-end {
-    width: calc(100% * (1 - var(--_end-fraction)) - var(--_state-layer-size) / 2 + 2px);
+    inline-size: calc(100% * (1 - var(--_end-fraction)) - var(--_state-layer-size) / 2 + 2px);
   }
 
   .tickmarks::before,
@@ -209,8 +221,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background-image: _get-tick-image(
                     var(--_with-tick-marks-inactive-container-color)
     );
-    margin-left: 4px;
-    margin-right: 4px;
+    margin-left: 6px;
+    margin-right: 6px;
   }
 
   :host([disabled]) .track::before {
@@ -223,11 +235,40 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background: var(--_disabled-inactive-track-color);
   }
 
+  .tickmarks::before {
+    clip-path: polygon(
+      calc((var(--_end-fraction) * 100%) - 8px) 0%,
+      calc((var(--_end-fraction) * 100%) - 8px) 100%,
+      calc((var(--_end-fraction) * 100%) + 8px) 100%,
+      calc((var(--_end-fraction) * 100%) + 8px) 0%,
+      100% 0%,
+      100% 100%,
+      0% 100%,
+      0% 0%
+    );
+  }
+
+  .ranged .tickmarks::before {
+    clip-path: polygon(
+      0% 0%,
+      0% 100%,
+      calc((var(--_start-fraction) * 100%) - 8px) 100%,
+      calc((var(--_start-fraction) * 100%) - 8px) 0%,
+      calc((var(--_end-fraction) * 100%) + 8px) 0%,
+      calc((var(--_end-fraction) * 100%) + 8px) 100%,
+      100% 100%,
+      100% 0%
+    );
+  }
+
   // active-track
-  .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 0);
+  }
+
+  .ranged .tickmarks::after {
     clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);
   }
 
@@ -239,8 +280,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     background-image: _get-tick-image(
                     var(--_with-tick-marks-active-container-color)
     );
-    margin-left: 4px;
-    margin-right: 4px;
+    margin-left: 6px;
+    margin-right: 6px;
   }
 
   // rtl for active track clipping
@@ -275,6 +316,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     padding-inline: calc(var(--_state-layer-size) / 2);
   }
 
+  .trackBlock,
   .handleContainerBlock {
     position: relative;
     block-size: 100%;
@@ -510,9 +552,9 @@ $_md-sys-shape: tokens.md-sys-shape-values();
 }
 
 // Returns a background-image with sized circular ticks of the given color.
-@function _get-tick-image($color) {
+@function _get-tick-image($color, $location: var(--_with-tick-marks-container-size)) {
   @return radial-gradient(
-                  circle at var(--_with-tick-marks-container-size) center,
+                  circle at $location center,
                   #{$color} 0,
                   #{$color} calc(var(--_with-tick-marks-container-size) / 2),
                   transparent calc(var(--_with-tick-marks-container-size) / 2)
diff --git a/slider/internal/slider.ts b/slider/internal/slider.ts
index 034dc703b0..c9d4aa784c 100644
--- a/slider/internal/slider.ts
+++ b/slider/internal/slider.ts
@@ -338,7 +338,7 @@ export class Slider extends sliderBaseClass {
     const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
     const containerStyles = {
       // for clipping inputs and active track.
-      '--_start-fraction': String(this.range ? startFraction : endFraction),
+      '--_start-fraction': String(startFraction),
       '--_end-fraction': String(endFraction),
       // for generating tick marks
       '--_tick-count': String(range / step),
@@ -403,10 +403,12 @@ export class Slider extends sliderBaseClass {
 
   private renderTrack() {
     return html`
-      <div class="track">
-        ${this.renderTrackPart('start')}
-        ${when(this.range, () => this.renderTrackPart('middle'))}
-        ${this.renderTrackPart('end')}
+      <div class="trackPadded">
+        <div class="trackBlock">
+          ${this.renderTrackPart('start')}
+          ${when(this.range, () => this.renderTrackPart('middle'))}
+          ${this.renderTrackPart('end')}
+        </div>
       </div>
       ${this.ticks ? html`<div class="tickmarks"></div>` : nothing}
     `;
diff --git a/tokens/v0_192/_md-comp-slider.scss b/tokens/v0_192/_md-comp-slider.scss
index 4c63cf6e9f..bc3fb53554 100644
--- a/tokens/v0_192/_md-comp-slider.scss
+++ b/tokens/v0_192/_md-comp-slider.scss
@@ -60,7 +60,7 @@ $_default: (
     'hover-state-layer-opacity':
       map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
     'inactive-track-color':
-      map.get($deps, 'md-sys-color', 'surface-container-highest'),
+      map.get($deps, 'md-sys-color', 'secondary-container'),
     'inactive-track-height': if($exclude-hardcoded-values, null, 16px),
     'inactive-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'),
     'label-container-color': map.get($deps, 'md-sys-color', 'inverse-surface'),
@@ -111,7 +111,7 @@ $_default: (
     'with-tick-marks-disabled-container-opacity':
       if($exclude-hardcoded-values, null, 0.38),
     'with-tick-marks-inactive-container-color':
-      map.get($deps, 'md-sys-color', 'on-surface-variant'),
+      map.get($deps, 'md-sys-color', 'on-secondary-container'),
     'with-tick-marks-inactive-container-opacity':
       if($exclude-hardcoded-values, null, 0.38)
   );

From 59dbdbdf74fe3fa72a4c9c5a7ffc73e4ffa4699d Mon Sep 17 00:00:00 2001
From: Daniel Fiala <danfiala23@gmail.com>
Date: Thu, 10 Oct 2024 12:21:37 +0000
Subject: [PATCH 4/6] docs(slider): update slider component styles and types

- Removed unnecessary image and description for button types
- Adjusted margin for slider labels
- Updated title and aria-label for slider types
---
 docs/components/slider.md | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/docs/components/slider.md b/docs/components/slider.md
index 19caf7da68..a3ed7cc1ad 100644
--- a/docs/components/slider.md
+++ b/docs/components/slider.md
@@ -61,11 +61,6 @@ Sliders can use icons or labels to represent a numeric or relative scale.
 
 ## Types
 
-<!-- no-catalog-start -->
-
-![The 5 types of common buttons](images/button/types.webp "Continous, discrete, range sliders")
-
-<!-- no-catalog-end -->
 <!-- catalog-only-start -->
 
 <!--
@@ -74,8 +69,8 @@ Sliders can use icons or labels to represent a numeric or relative scale.
   <figure
       class="types-image"
       style="justify-content:center;"
-      title="Elevated, filled, filled tonal, outlined, and text buttons"
-      aria-label="The 5 types of common buttons">
+      title="Continous, discrete and range sliders"
+      aria-label="The 3 types of sliders">
     <style>
       .types-image .wrapper,
       .types-image .wrapper > * {
@@ -94,7 +89,7 @@ Sliders can use icons or labels to represent a numeric or relative scale.
         background-color: var(--md-sys-color-inverse-surface);
         color: var(--md-sys-color-inverse-on-surface);
         padding: 8px;
-        margin-block-start: 8px;
+        margin-block-start: 24px;
         width: 24px;
         height: 24px;
         border-radius: 50%;

From 26b2b83d948b429fe245eff6069bcc5c78ed22b7 Mon Sep 17 00:00:00 2001
From: Daniel Fiala <danfiala23@gmail.com>
Date: Thu, 10 Oct 2024 16:08:57 +0200
Subject: [PATCH 5/6] chore: minor improvement to slider styling

---
 docs/components/slider.md    |  2 +-
 slider/internal/_slider.scss | 31 +++++++++++++------------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/docs/components/slider.md b/docs/components/slider.md
index a3ed7cc1ad..db63018d2a 100644
--- a/docs/components/slider.md
+++ b/docs/components/slider.md
@@ -103,7 +103,7 @@ Sliders can use icons or labels to represent a numeric or relative scale.
         <span>1</span>
       </div>
       <div>
-        <md-slider step="5" ticks min="0" max="20"></md-slider>
+        <md-slider labeled step="5" ticks min="0" max="20"></md-slider>
         <span>2</span>
       </div>
       <div>
diff --git a/slider/internal/_slider.scss b/slider/internal/_slider.scss
index 098e9cb43a..5fd0e648d3 100644
--- a/slider/internal/_slider.scss
+++ b/slider/internal/_slider.scss
@@ -74,10 +74,10 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     min-inline-size: 200px;
 
     @include elevation.theme(
-                    (
-                            level: var(--_handle-elevation),
-                            shadow-color: var(--_handle-shadow-color),
-                    )
+      (
+        level: var(--_handle-elevation),
+        shadow-color: var(--_handle-shadow-color),
+      )
     );
   }
 
@@ -105,9 +105,9 @@ $_md-sys-shape: tokens.md-sys-shape-values();
     opacity: var(--_disabled-active-track-opacity);
 
     @include elevation.theme(
-                    (
-                            level: var(--_disabled-handle-elevation),
-                    )
+      (
+        level: var(--_disabled-handle-elevation),
+      )
     );
   }
 
@@ -207,16 +207,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   }
 
   // inactive-track
-  .track::before,
   .tickmarks::before {
     block-size: var(--_inactive-track-height);
     border-radius: var(--_inactive-track-shape);
   }
 
-  .track::before {
-    background: var(--_inactive-track-color);
-  }
-
   .tickmarks::before {
     background-image: _get-tick-image(
                     var(--_with-tick-marks-inactive-container-color)
@@ -535,12 +530,12 @@ $_md-sys-shape: tokens.md-sys-shape-values();
   // Ripple
   .handle {
     @include ripple.theme(
-                    (
-                            hover-color: var(--_hover-state-layer-color),
-                            hover-opacity: var(--_hover-state-layer-opacity),
-                            pressed-color: var(--_pressed-state-layer-color),
-                            pressed-opacity: var(--_pressed-state-layer-opacity),
-                    )
+      (
+        hover-color: var(--_hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
     );
   }
 

From 40143561a609142dbe24b514507a50a199dd13bc Mon Sep 17 00:00:00 2001
From: Daniel Fiala <danfiala23@gmail.com>
Date: Fri, 11 Oct 2024 04:40:45 +0000
Subject: [PATCH 6/6] refactor(slider): remove unused elevation import and
 element

Remove the unused import of the 'elevation' module and the corresponding element from the slider component.
---
 slider/internal/slider.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/slider/internal/slider.ts b/slider/internal/slider.ts
index c9d4aa784c..9e525b2726 100644
--- a/slider/internal/slider.ts
+++ b/slider/internal/slider.ts
@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import '../../elevation/elevation.js';
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 
@@ -444,9 +443,7 @@ export class Slider extends sliderBaseClass {
         isOverlapping,
       })}">
       <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
-      <div class="handleNub">
-        <md-elevation part="elevation"></md-elevation>
-      </div>
+      <div class="handleNub"></div>
       ${when(this.labeled, () => this.renderLabel(label))}
     </div>`;
   }