fix(slider): ensure z-index in Express theme

adobe · Oct 4, 2023 · c0cc655 · c0cc655
1 parent 63a06f4
commit c0cc655
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/slider/src/HandleController.ts b/packages/slider/src/HandleController.ts
@@ -533,7 +533,7 @@ export class HandleController {
     public render(): TemplateResult[] {
         this.clearHandleComponentCache();
         return this.model.map((model, index) => {
-            const zIndex = this.handleOrder.indexOf(model.name) + 1;
+            const zIndex = this.handleOrder.indexOf(model.name) + 2;
             return this.renderHandle(
                 model,
                 index,

diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
@@ -132,6 +132,26 @@ export const Default = (args: StoryArgs = {}): TemplateResult => {
     `;
 };
 
+export const autofocus = (args: StoryArgs = {}): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin-inline: 20px;">
+            <sp-slider
+                autofocus
+                max="1"
+                min="0"
+                value=".5"
+                step="0.01"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                .formatOptions=${{ style: 'percent' }}
+                ...=${spreadProps(args)}
+            >
+                Opacity
+            </sp-slider>
+        </div>
+    `;
+};
+
 export const minimalDOM = (): TemplateResult => {
     return html`
         <div style="width: 500px; margin: 12px 20px;">