Remove the invalid required attribute from <wa-slider>

packages/webawesome/docs/docs/components/slider.md

@@ -281,14 +281,3 @@ Use the `disabled` attribute to disable a slider.
 <wa-slider label="Disabled" value="50" disabled></wa-slider>
 ```
 
-### Required
-
-Mark a slider as required using the `required` attribute. Users must interact with required sliders before the form can be submitted.
-
-```html {.example}
-<form action="about:blank" target="_blank" method="get">
-  <wa-slider name="slide" label="Required slider" min="0" max="10" required></wa-slider>
-  <br />
-  <button type="submit">Submit</button>
-</form>
-```

packages/webawesome/docs/docs/resources/changelog.md

@@ -10,8 +10,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Unreleased
 
-<small>TBD</small>
-
 - Added `--wa-space-5xl` design token to all themes  [issue:1606]
 - Added `wa-gap-5xl` utility class  [issue:1606]
 - Added `wa-gap-4xl` to the gap utility `:where()` selector
@@ -24,6 +22,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed slider styling when using the `label` slot so that it matches attribute use. [issue:2124]
 - Fixed a bug in `<wa-scroller>` that caused horizontal page overflow in Chrome when containing wide content such as tables
 - Fixed a bug in `<wa-details>` and native `<details>` that caused full-width elements to overflow the details content [issue:2137]
+- Fixed a bug in `<wa-slider>` that introduced a `required` attribute which isn't valid on range elements [issue:1471]
+<small>TBD</small>
 - Fixed the `autocorrect` property type in `<wa-input>` and `<wa-combobox>` to use `boolean` instead of a string union
 - Improved `<wa-tree>` and `<wa-tree-item>` so all internal dimensions (labels, checkboxes, expand buttons, etc.) scale proportionally with `font-size`, making it easy to resize the tree [discuss:2147]
 - Improved `<wa-combobox>`

packages/webawesome/src/components/slider/slider.ts

@@ -179,9 +179,6 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
   /** The granularity the value must adhere to when incrementing and decrementing. */
   @property({ type: Number }) step: number = 1;
 
-  /** Makes the slider a required field. */
-  @property({ type: Boolean, reflect: true }) required = false;
-
   /** Tells the browser to focus the slider when the page loads or a dialog is shown. */
   @property({ type: Boolean }) autofocus: boolean;
 

packages/webawesome/src/internal/validators/slider-validator.ts

@@ -2,17 +2,11 @@ import type WaSlider from '../../components/slider/slider.js';
 import type { Validator } from '../webawesome-form-associated-element.js';
 
 /**
- * Comprehensive validator for sliders that handles required, range, and step validation
+ * Comprehensive validator for sliders that handles range and step validation
  */
 export const SliderValidator = (): Validator<WaSlider> => {
-  // Create a native range input to get localized validation messages
-  const nativeRequiredRange = Object.assign(document.createElement('input'), {
-    type: 'range',
-    required: true,
-  });
-
   return {
-    observedAttributes: ['required', 'min', 'max', 'step'],
+    observedAttributes: ['min', 'max', 'step'],
     checkValidity(element) {
       const validity: ReturnType<Validator['checkValidity']> = {
         message: '',
@@ -34,14 +28,6 @@ export const SliderValidator = (): Validator<WaSlider> => {
         return input.validationMessage;
       };
 
-      // Check required validation first
-      if (element.required && !element.hasInteracted) {
-        validity.isValid = false;
-        validity.invalidKeys.push('valueMissing');
-        validity.message = nativeRequiredRange.validationMessage || 'Please fill out this field.';
-        return validity;
-      }
-
       // For range sliders, validate both values
       if (element.isRange) {
         const minValue = element.minValue;