fixes #448

docs/resources/changelog.md

@@ -18,6 +18,7 @@ Technical reasons aside, canceling these events seldom led to a good user experi
 - Added Iconoir example to the icon docs
 - Changed the `cancelable` default to `false` for the internal `@event` decorator
 - Fixed a bug where toggling `open` stopped working in `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-dropdown`, and `sl-tooltip`
+- Fixed a bug in `sl-range` where setting a value below `min` would cause the value to equal `min` [#448](https://github.com/shoelace-style/shoelace/issues/448)
 - Fixed a number of imports that should have been type imports
 - Updated Lit to 2.0.0-rc.2
 - Updated esbuild to 0.12.4

src/components/input/input.ts

@@ -264,6 +264,7 @@ export default class SlInput extends LitElement {
   }
 
   render() {
+    // NOTE - always bind value after min/max, otherwise it will be clamped
     return renderFormControl(
       {
         inputId: this.inputId,
@@ -304,7 +305,6 @@ export default class SlInput extends LitElement {
             class="input__control"
             type=${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}
             name=${ifDefined(this.name)}
-            .value=${this.value}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
@@ -314,6 +314,7 @@ export default class SlInput extends LitElement {
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
             step=${ifDefined(this.step)}
+            .value=${this.value}
             autocapitalize=${ifDefined(this.autocapitalize)}
             autocomplete=${ifDefined(this.autocomplete)}
             autocorrect=${ifDefined(this.autocorrect)}

src/components/range/range.ts

@@ -165,6 +165,7 @@ export default class SlRange extends LitElement {
   }
 
   render() {
+    // NOTE - always bind value after min/max, otherwise it will be clamped
     return renderFormControl(
       {
         inputId: this.inputId,
@@ -193,12 +194,12 @@ export default class SlRange extends LitElement {
             part="input"
             type="range"
             class="range__control"
-            name=${this.name}
-            .value=${this.value + ''}
+            name=${ifDefined(this.name)}
             ?disabled=${this.disabled}
             min=${ifDefined(this.min)}
             max=${ifDefined(this.max)}
             step=${ifDefined(this.step)}
+            .value=${String(this.value)}
             aria-labelledby=${ifDefined(
               getLabelledBy({
                 label: this.label,