Range form element track background is practically invisible on a white background

[sallen-wiley]

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

[mr-molecule]

Hi Folks,

Kindly Assign this issue to me, I am a beginner but i will try to solve this issue

[JOKER-ADitya]

it looks fine

[sallen-wiley]

it looks fine

That isn't how it looks on bootstrap's docs or in the reduced test case - perhaps you are overwriting the styles or using a different setup?

This is how it looks for me across my devices on the bootstrap docs and in the reduced test case:

[boutetnico]

Workaround using pre 5.3 method:

$form-range-track-bg: $gray-300;