Range input: Add a workaround to enable track color

[louismaximepiton]

Description

Wanted to add a workaround to add some color on the track part on the range input. I would be fine if this is not planned in Bootstrap, but I couldn't spot any issue/PR about it.

Motivation & Context

Could help folks to implement this functionnality.

Type of changes

• New feature (non-breaking change which adds functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-37499--twbs-bootstrap.netlify.app/docs/5.3/forms/range#via-javascript

Related issues

NA

[ffoodd]

A few questions here and there! Regarding content, I think the --value custom property should be mentionned somewhere since it's what does the trick so affordable.
Any thought?

[louismaximepiton]

Regarding the --value, do you think it should be prefixed by bs- ? Tried some things one last commit to make --value more visible in the doc.

[mdo]

Do we still want this @julien-deramond?

[julien-deramond]

Do we still want this @julien-deramond?

Might be some things to tweak here and there in this PR but on my side I like the idea to provide a solution for folks out there totally optional that isn't embedded directly within the library.

[mdo]

Tried rebasing this and making it work again, but ran into an issue with the custom color not working. Might've been a bad rebase or merge, but want to take a crack at it @louismaximepiton? Happy to see this section added.

[coliff]

This is really great! I'd like to see this added to the site too (and maybe added to v6 Bootstrap JS?).

One thing to note though, for disabled ranges using this method you need to add CSS to override it. I just used this but there might be a better way:

.form-range:disabled {
  filter: grayscale(100%);
}

[mdo]

This is now coming in v6. #42525.