Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

The range form element track is practically invisible on most of the screens I have tested. It uses the tertiary background colour which on a white background is very difficult to see.

$form-range-track-bg: var(--#{$prefix}tertiary-bg);

Contrast check

This can be a user experience issue because at first glance, it just looks like a floating circle and the extent of the range cannot be seen.

Reduced test cases

https://codepen.io/sallen/pen/NWeKjpB

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox

What version of Bootstrap are you using?

v5.3