fixes #674

docs/resources/changelog.md

@@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that caused `<sl-details>` to not show when double clicking the summary while open [#662](https://github.com/shoelace-style/shoelace/issues/662)
 - Fixed a bug that prevented the first/last menu item from receiving focus when pressing up/down in `<sl-dropdown>`
 - Fixed a bug that caused the active tab indicator in `<sl-tab-group>` to render incorrectly when used inside an element that animates [#671](https://github.com/shoelace-style/shoelace/pull/671)
+- Fixed a bug that allowed values in `<sl-range>` to be invalid according to its `min|max|step` [#674](https://github.com/shoelace-style/shoelace/issues/674)
 
 ## 2.0.0-beta.68
 

src/components/range/range.ts

@@ -144,6 +144,11 @@ export default class SlRange extends LitElement {
   handleValueChange() {
     this.invalid = !this.input.checkValidity();
 
+    // The value may have constraints, so we set the native control's value and sync it back to ensure it adhere's to
+    // min, max, and step properly
+    this.input.value = this.value.toString();
+    this.value = parseFloat(this.input.value);
+
     this.syncRange();
   }