diff --git a/packages/webawesome/docs/docs/components/slider.md b/packages/webawesome/docs/docs/components/slider.md
index 5b0bb6b284..c4d44d65d9 100644
--- a/packages/webawesome/docs/docs/components/slider.md
+++ b/packages/webawesome/docs/docs/components/slider.md
@@ -281,14 +281,3 @@ Use the `disabled` attribute to disable a 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}
-
-```
diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index e52da37bf0..410e2b2b99 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -10,8 +10,6 @@ Components with the Experimental badge sh
## Unreleased
-TBD
-
- 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 Experimental badge sh
- Fixed slider styling when using the `label` slot so that it matches attribute use. [issue:2124]
- Fixed a bug in `` that caused horizontal page overflow in Chrome when containing wide content such as tables
- Fixed a bug in `` and native `` that caused full-width elements to overflow the details content [issue:2137]
+- Fixed a bug in `` that introduced a `required` attribute which isn't valid on range elements [issue:1471]
+TBD
- Fixed the `autocorrect` property type in `` and `` to use `boolean` instead of a string union
- Improved `` and `` so all internal dimensions (labels, checkboxes, expand buttons, etc.) scale proportionally with `font-size`, making it easy to resize the tree [discuss:2147]
- Improved ``
diff --git a/packages/webawesome/src/components/slider/slider.ts b/packages/webawesome/src/components/slider/slider.ts
index 1a5d092bb1..007542e3eb 100644
--- a/packages/webawesome/src/components/slider/slider.ts
+++ b/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;
diff --git a/packages/webawesome/src/internal/validators/slider-validator.ts b/packages/webawesome/src/internal/validators/slider-validator.ts
index 44ea1d0dcc..f2890ddd73 100644
--- a/packages/webawesome/src/internal/validators/slider-validator.ts
+++ b/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 => {
- // 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 = {
message: '',
@@ -34,14 +28,6 @@ export const SliderValidator = (): Validator => {
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;