From 25aa8318d9c6f378dcd08d3d9adebfe1a3c4cfe0 Mon Sep 17 00:00:00 2001
From: Denis Korablev <timefordroids@users.noreply.github.com>
Date: Tue, 19 Oct 2021 17:48:39 +0400
Subject: [PATCH] fix(sl-range): add value change handler (#572)

---
 src/components/range/range.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index 760af6410..bb9d3b829 100644
--- a/src/components/range/range.ts
+++ b/src/components/range/range.ts
@@ -138,6 +138,17 @@ export default class SlRange extends LitElement {
     emit(this, 'sl-blur');
   }
 
+  @watch('value', { waitUntilFirstUpdate: true })
+  handleValueChange() {
+    this.value = Number(this.value);
+
+    if (this.input) {
+      this.invalid = !this.input.checkValidity();
+    }
+
+    requestAnimationFrame(() => this.syncRange());
+  }
+
   @watch('disabled')
   handleDisabledChange() {
     // Disabled form controls are always valid, so we need to recheck validity when the state changes