Summary

Improved range slider visibility for low-vision users. The range slider border now uses a thicker 2px width and darker #646464 color for stronger contrast against the slider background.

Breaking change

This is not a breaking change.

Related issue

Closes #6444

Related pull requests

None.

Preview link

Preview link: N/A

Problem statement

The range slider border was difficult to see because the default border was thin and had limited contrast against the slider background. This could make the component harder for low-vision users to perceive.

Solution

Updated the range slider border styling to use a 2px border and #646464, matching the issue recommendation. This applies to the track border and thumb border treatment while leaving the existing focus behavior unchanged.

Major changes

• Increased the range slider track border from 1px to 2px.
• Updated the range slider border color to #646464.
• Updated the thumb border treatment to use the same 2px #646464 styling.

Testing and review

Tested locally with:

npx prettier --check packages/usa-range/src/styles/_usa-range.scss
npx stylelint packages/usa-range/src/styles/_usa-range.scss
npx gulp compileSass
npm run lint:sass
git diff --check