fix(slider): ensure first render when no "value" is supplied

adobe · Aug 29, 2023 · eed860b · eed860b
1 parent 9e5c0f7
commit eed860b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/packages/slider/src/HandleController.ts b/packages/slider/src/HandleController.ts
@@ -17,11 +17,7 @@ import {
 } from '@spectrum-web-components/base/src/directives.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 import { Slider } from './Slider.js';
-import {
-    Controller,
-    SliderHandle,
-    SliderNormalization,
-} from './SliderHandle.js';
+import { SliderHandle, SliderNormalization } from './SliderHandle.js';
 
 interface HandleReference {
     handle: HTMLElement;
@@ -61,7 +57,7 @@ export interface HandleValueDictionary {
     [key: string]: number;
 }
 
-export class HandleController implements Controller {
+export class HandleController {
     private host!: Slider;
     private handles: Map<string, SliderHandle> = new Map();
     private model: ModelValue[] = [];

diff --git a/packages/slider/src/SliderHandle.ts b/packages/slider/src/SliderHandle.ts
@@ -21,6 +21,7 @@ import {
     NumberFormatOptions,
     NumberFormatter,
 } from '@internationalized/number';
+import { HandleController } from './HandleController.js';
 
 export type HandleMin = number | 'previous';
 export type HandleMax = number | 'next';
@@ -30,13 +31,6 @@ export type HandleValues = {
     value: number;
 }[];
 
-export interface Controller {
-    inputForHandle(handle: SliderHandle): HTMLInputElement | undefined;
-    requestUpdate(): void;
-    setValueFromHandle(handle: SliderHandle): void;
-    handleHasChanged(handle: SliderHandle): void;
-}
-
 export type SliderNormalization = {
     toNormalized: (value: number, min: number, max: number) => number;
     fromNormalized: (value: number, min: number, max: number) => number;
@@ -78,7 +72,7 @@ const MaxConverter = {
  * @fires change - An alteration to the value of the element has been committed by the user.
  */
 export class SliderHandle extends Focusable {
-    public handleController?: Controller;
+    public handleController?: HandleController;
 
     public get handleName(): string {
         return this.name;
@@ -138,6 +132,7 @@ export class SliderHandle extends Focusable {
             if (this.value == null) {
                 if (!isNaN(max) && !isNaN(min)) {
                     this.value = max < min ? min : min + (max - min) / 2;
+                    this.handleController?.hostUpdate();
                 }
             }
         }

diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
@@ -132,6 +132,14 @@ export const Default = (args: StoryArgs = {}): TemplateResult => {
     `;
 };
 
+export const minimalDOM = (): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider>Opacity</sp-slider>
+        </div>
+    `;
+};
+
 export const noVisibleTextLabel = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin: 12px 20px;">