fix: normalize min/max bounds when min > max

- Normalize range bounds before clamping values
- Fix incorrect clamping when min is greater than max
- Ensure negative and reversed ranges behave correctly

Author: andreruffert

index.html

@@ -175,7 +175,7 @@ <h1>default attributes</h1>
 
       <section>
         <h1>Negative attributes</h1>
-        <range-slider min="-10" max="0"></range-slider>
+        <range-slider min="-10" max="-80" step="5" value="-30"></range-slider>
       </section>
 
       <section>

src/range-slider-element.js

@@ -385,8 +385,13 @@ export class RangeSliderElement extends HTMLElement {
   #updateValue(index, value, dispatchEvents = []) {
     const oldValue = this.#value[index];
     const valuePrecision = Number(this.valuePrecision) || getPrescision(this.step) || 0;
-    const thumbMinValue = this.#value[index - 1] || this.min;
-    const thumbMaxValue = this.#value[index + 1] || this.max;
+
+    // Normalize bounds for negative attributes
+    const rangeMin = Math.min(this.min, this.max);
+    const rangeMax = Math.max(this.min, this.max);
+
+    const thumbMinValue = this.#value[index - 1] ?? rangeMin;
+    const thumbMaxValue = this.#value[index + 1] ?? rangeMax;
 
     // Thumb min, max constrain
     const safeValue = Math.min(Math.max(value, thumbMinValue), thumbMaxValue);

test/range-slider.test.js

@@ -54,6 +54,13 @@ test('custom attributes', async () => {
   expect(handleEvent).not.toHaveBeenCalled();
 });
 
+test('negative attributes', async () => {
+  render('<range-slider min="-10" max="-80" step="10" value="-30"></range-slider>');
+
+  const element = document.querySelector('range-slider');
+  expect(element).toHaveValue('-30');
+});
+
 test('programmatic value property changes', async () => {
   render('<range-slider></range-slider>');