changed the background color

[joel6948]

change for this issue
#39849 (comment)

[julien-deramond]

Thanks for your PR @joel6948
Before we can review this PR:

• Please use the PR template and describe your changes and maybe show what's the rendering based on the original issue with a screenshot or whatever
• Please fix the lint issues
• Probably use a new Sass variable if $form-range-thumb-bg can't be used. But please bear in mind that it was used before also in &::-webkit-slider-thumb rule. There's nothing to do here?

[joel6948]

Proposal
I can see the ticks if I don't include the bootstrap form-range class. But whenever I add that class, the ticks are gone.

<input type="range" min="100" max="500" class="form-range" list="range-list">
<datalist id="range-list">
   <option value="100">
   <option value="200">
   <option value="300">
   <option value="400">
   <option value="500">
</datalist>

Motivation and context
Functionality is already there in the browser, but it's not working with Bootstrap.

added some changes regarding the sass varibale

[julien-deramond]

I'm sorry, but I'm closing this PR @joel6948
The description hasn't been changed, there's no explanation on how the change does the work required in the issue.
There's still a linter issue.
Moreover, there's a regression on Chrome where the thumb is now black in light/dark mode instead of the right color:

Feel free to recreate a PR later on containing all the required content after having tested everything locally.