search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 42 forks source link

range: track width gets out of sync with input value #157

Closed ambar-arkin closed 2 years ago

ambar-arkin commented 2 years ago

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. image

Expected behavior

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

Versions

Clarity project:

Clarity version:

Framework:

Framework version: React 17, 18

Device:

Additional notes

Add any other notes about the problem here.

github-actions[bot] commented 2 years ago

:tada: This issue has been resolved in version 5.8.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 2 years ago

:tada: This issue has been resolved in version 6.1.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 2 years ago

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.