fix(slider): reimplement gradient slider track application

adobe · Feb 2, 2024 · a10b91e · a10b91e
1 parent 47d7d71
commit a10b91e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -417,12 +417,12 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
         ];
         const trackItems = [
             { id: 'track0', html: this.renderTrackSegment(...segments[0]) },
+            { id: 'fill', html: this.renderFillOffset() },
             { id: 'ramp', html: this.renderRamp() },
             ...segments.slice(1).map(([start, end], index) => ({
                 id: `track${index + 1}`,
                 html: this.renderTrackSegment(start, end),
             })),
-            { id: 'fill', html: this.renderFillOffset() },
         ];
 
         return html`
@@ -501,12 +501,8 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
         const size = end - start;
         const styles: StyleInfo = {
             width: `${size * 100}%`,
-            ...(this.handleController.size > 1 && {
-                '--spectrum-slider-track-background-size': `${
-                    (1 / size) * 100
-                }%`,
-                '--spectrum-slider-track-segment-position': `${start * 100}%`,
-            }),
+            '--spectrum-slider-track-background-size': `${(1 / size) * 100}%`,
+            '--spectrum-slider-track-segment-position': `${start * 100}%`,
         };
         return styles;
     }

diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
@@ -145,3 +145,7 @@ governing permissions and limitations under the License.
 :host([label-visibility='none']) #track {
     align-self: flex-end;
 }
+
+.fill {
+    z-index: 2;
+}
diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
@@ -499,17 +499,29 @@ hideStepper.decorators = [editableDecorator];
 
 export const Gradient = (args: StoryArgs = {}): TemplateResult => {
     return html`
+        <style>
+            sp-slider {
+                --mod-slider-track-color: linear-gradient(
+                    to right,
+                    red,
+                    green 100%
+                );
+            }
+            sp-slider[dir='rtl'] {
+                --mod-slider-track-color: linear-gradient(
+                    to left,
+                    red,
+                    green 100%
+                );
+            }
+        </style>
         <div
             style="
                 width: 500px;
                 margin: 12px 20px;
             "
         >
             <sp-slider
-                style="
-                    --spectrum-slider-track-color:linear-gradient(to right, red, green 100%);
-                    --spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%);
-                "
                 label="Opacity"
                 max="100"
                 min="0"