range: track width gets out of sync with input value

[ambar-arkin]

Describe the bug

The color/highlight of the range input goes out of sync with the input value when the input value is changed in a controlled input by calling setValue.

How to reproduce

https://stackblitz.com/edit/vitejs-vite-qcpvwl?file=src/App.jsx

Steps to reproduce the behavior:

1. The range slider is initially at 50/100
2. Move it to somewhere around 75/100
3. Click the reset button.
4. See the colored portion is from 0 to 75 while input value is 50.

Expected behavior

The colored portion should change when changing input value using javascript.

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v5.x
• v6.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
React 17, 18

Device:

• Type: MacBook
• OS: MacOS Monterey
• Browser: Chromium
• Version: 104

Additional notes

Add any other notes about the problem here.

[github-actions]

🎉 This issue has been resolved in version 5.8.2 🎉

The release is available on:

• GitHub release
• v5.8.2

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 6.1.2 🎉

The release is available on:

• GitHub release
• v6.1.2

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.