From 80e8cb54d0868ce3f4451c3451e95a89b8b5a229 Mon Sep 17 00:00:00 2001
From: Westbrook Johnson <westbrook.johnson@gmail.com>
Date: Fri, 7 May 2021 11:39:16 -0400
Subject: [PATCH] fix(slider): ensure min/max/value application order

---
 packages/slider/src/Slider.ts       | 31 +++++++------------------
 packages/slider/test/slider.test.ts | 35 +++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
index a5dfa431cc..e11f2aeccb 100644
--- 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
index 3af76d1e83..bd5d9381c9 100644
--- 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);
+    });
 });