fix(slider): ensure min/max/value application order

adobe · May 7, 2021 · 80e8cb5 · 80e8cb5
1 parent 8d3a0bd
commit 80e8cb5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -37,26 +37,7 @@ export class Slider extends Focusable {
     public type = '';
 
     @property({ type: Number, reflect: true })
-    public get value(): number {
-        return this._value;
-    }
-
-    public set value(value: number) {
-        const oldValue = this.value;
-        if (this.input) {
-            this.input.value = String(value);
-        }
-        const newValue = this.input ? parseFloat(this.input.value) : value;
-
-        if (newValue === oldValue) {
-            return;
-        }
-
-        this._value = newValue;
-        this.requestUpdate('value', oldValue);
-    }
-
-    private _value = 10;
+    public value = 10;
 
     @property({ type: String })
     public set variant(variant: string) {
@@ -145,7 +126,11 @@ export class Slider extends Focusable {
 
     protected updated(changedProperties: PropertyValues): void {
         if (changedProperties.has('value')) {
-            this.dispatchInputEvent();
+            if (this.value === this.input.valueAsNumber) {
+                this.dispatchInputEvent();
+            } else {
+                this.value = this.input.valueAsNumber;
+            }
         }
     }
 
@@ -261,10 +246,10 @@ export class Slider extends Focusable {
                 <input
                     type="range"
                     id="input"
-                    value=${this.value}
-                    step=${this.step}
                     min=${this.min}
                     max=${this.max}
+                    step=${this.step}
+                    value=${this.value}
                     aria-disabled=${ifDefined(
                         this.disabled ? 'true' : undefined
                     )}

diff --git a/packages/slider/test/slider.test.ts b/packages/slider/test/slider.test.ts
@@ -555,4 +555,39 @@ describe('Slider', () => {
 
         expect(input.getAttribute('aria-valuetext')).to.equal('50');
     });
+    it('accepts min/max/value in the same timing', async () => {
+        const el = await fixture<Slider>(
+            html`
+                <sp-slider></sp-slider>
+            `
+        );
+
+        await elementUpdated(el);
+
+        expect(el.value).to.equal(10);
+
+        el.min = 0;
+        el.max = 200;
+        el.value = 200;
+
+        await elementUpdated(el);
+
+        expect(el.value).to.equal(200);
+
+        el.value = 500;
+        el.min = 0;
+        el.max = 500;
+
+        await elementUpdated(el);
+
+        expect(el.value).to.equal(500);
+
+        el.value = -100;
+        el.min = -100;
+        el.max = 500;
+
+        await elementUpdated(el);
+
+        expect(el.value).to.equal(-100);
+    });
 });