USWDS - Bug: Introduce visual instruction for range slider #6614

Describe the bug

The range slider component should have instructions to ensure visual users know how to operate the slider.

In partnership with VA teams (including @coforma-jamie, @artsymartha68), we are re-describing minor issues with range slider under this issue and closing out a prior issue, in order to avoid confusion. This issue closes and replaces #6443 and is related to #6116.

Steps to reproduce the bug

1. Go to https://designsystem.digital.gov/components/range-slider/
2. Note there's no visual instruction indicating how to operate the component

Expected Behavior

The range slider component and example on the USWDS website should both have visual instruction indicated through a hint in the component example:

1. The instruction should read: “Move the slider to change the value”
2. The color of this text can be presented in the dark grey class="usa-hint", which is used in both character count and date range picker components.

Related code

No response

Screenshots

No response

System setup

No response

Additional context

Full instruction on how to operate a range slider is available to screen reader users through a screen reader's inherent behavior navigating semantic HTML. Using both VoiceOver and JAWS screen readers, we verified they each describe how to use the range slider as-is, when no hints or ARIA are added on. Because instruction slightly differs across screen readers, we want to ensure we aren't overly prescriptive in applying screen reader-only hints (excess ARIA was removed in #5413).

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.