feat(web-components): change slider to use Element Internals

[marchbox]

Previous Behavior

• ARIA attributes were added to the host element directly
• Some APIs are not aligned with <input type=range>

New Behavior

Built based on @chrisdholt’s original changes.

• Use Element Internals for ARIA and custom states
• Added form associated properties and methods, e.g. willValidate, reportValidity(), etc.
• Updating the disabled state on an ancestor <fieldset> element will also update the component’s disabled state, if not explicitly set yet
• Updating valueTextFormatter will update ariaValueText now.
• min, max and step are now always string type (but can accept non-string values when setting)
• Removed readonly support to align with <input type=range> (authors can still add aria-readonly to the component)
• Added additional test coverage

Related Issue(s)

• Fixes #

[marchbox]

@marchbox can we add an example of using slider within fluent-field so we can have all form controls represented?

@chrisdholt Oh never mind, mis read your message. Yeah I'll add that in Field's story.

[marchbox]

@marchbox can we add an example of using slider within fluent-field so we can have all form controls represented?

I saw there is an example under ComponentExamples story.

[mlijanto]

Looks good @marchbox! I only left a few small comments. Thanks!