input[type=range] fix on Chrome

[louismaximepiton]

Fixes #1264

https://deploy-preview-1282--boosted.netlify.app/docs/5.2/forms/range/

It fixes the thumb display on Chrome and add an explaination to implement the runnable track on Chrome.

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	5e35a37
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6375f602aa7e920008acd411
😎 Deploy Preview	https://deploy-preview-1282--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[julien-deramond]

CodePen rendering isn't a bit weird with the black border when we click on the slider?

[julien-deramond]

Regarding the use of a CodePen I'm not against it atm but I'm afraid it would be complicated to maintain for each version.
In the documentation, we already have a "Progressive enhancement" warning callout, wouldn't be easier to maintain to explain the content of your CodePen directly in the documentation (even without showing the rendering)?

[louismaximepiton]

Regarding the use of a CodePen I'm not against it atm but I'm afraid it would be complicated to maintain for each version. In the documentation, we already have a "Progressive enhancement" warning callout, wouldn't be easier to maintain to explain the content of your CodePen directly in the documentation (even without showing the rendering)?

You're right, during the write of the Codepen, I was asking myself on how to remember to update this Codepen, I'll implement your idea.

[julien-deramond]

@MewenLeHo This PR can be interesting for you regarding the sliders prototypes you're developing.

[ffoodd]

FWIW this example could be lighter on the JS-side by using a CSS custom property, here's an example on CodePen.

[louismaximepiton]

Hi @ffoodd,

Thanks for the comment, I tried to take the CodePen into account, it kindly dedupes the CSS code which is way better. Do you think it's worth to integrate the explanation in Bootstrap directly ?

[ffoodd]

You may suggest it for sure, but I dont know if it'll be merged 🙂

[louismaximepiton]

Let's wait for twbs/bootstrap#37499 !

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[julien-deramond]

Closing it. Wait for twbs/bootstrap#37499. If accepted in Bootstrap it will be introduced in Boosted automatically. If not, we will recreate a PR here.