feat: restore form-associated value state

Restore the element's value state after navigation or browser restart and support autofill.

When the user agent updates a form-associated custom element's value on behalf of a user or as part of navigation, its `formStateRestoreCallback` is called, given the new state and a string indicating a reason, "autocomplete" or "restore", as arguments.

https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue

Author: andreruffert

src/range-slider-element.js

@@ -193,6 +193,9 @@ export class RangeSliderElement extends HTMLElement {
   formResetCallback() {
     this.value = this.getAttribute('value') || this.#getDefaultValue();
   }
+  formStateRestoreCallback(state) {
+    this.value = state; // Restore slider position
+  }
 
   connectedCallback() {
     // Template setup
@@ -406,7 +409,7 @@ export class RangeSliderElement extends HTMLElement {
     if (oldValue !== newValue) {
       this.#value[index] = newValue;
       this.#valuePercent[index] = this.#getPercentFromValue(newValue);
-      this.#internals.setFormValue(this.#value.join(','));
+      this.#internals.setFormValue(this.value, this.value); // value, state
       this.#updateThumb(index, newValue);
       this.#updateTrackFill();
       for (const eventName of dispatchEvents) {

test/range-slider.test.js

@@ -80,6 +80,26 @@ describe('range-slider', () => {
 
       expect(element).toHaveValue('30');
     });
+
+    test('restores form state and does not dispatch events', async () => {
+      const { element } = setup('<form><range-slider name="slider"></range-slider></form>');
+      const { input, change } = listenToEvents(element, ['input', 'change']);
+      const form = document.querySelector('form');
+
+      // Simulate browser session/BFCache restore (value, mode)
+      element.formStateRestoreCallback('25', 'restore');
+      expect(element).toHaveValue('25');
+      expect(form).toHaveFormValues({ slider: '25' });
+
+      // Simulate browser autofill (value, mode)
+      element.formStateRestoreCallback('70', 'autocomplete');
+      expect(element).toHaveValue('70');
+      expect(form).toHaveFormValues({ slider: '70' });
+
+      // Should not dispatch events (matches native input restore)
+      expect(input).not.toHaveBeenCalled();
+      expect(change).not.toHaveBeenCalled();
+    });
   });
 
   describe('attributes', () => {