fix(number-field, slider): ensure cached value is cleared when toggling between different steps

[blunteshwar]

Description

When more than 2 sliders are present one of the slider starts rounding off values.

Related issue(s)

How has this been tested?

A story with multiple sliders has been added to test this out!

• Test case 1

  1. Go here
  2. Toggle between sliders and see that the value 0.75 does noty rounds off to 1

• Did it pass in Desktop?

• Did it pass in Mobile?

• Did it pass in iPad?

Screenshots (if appropriate)

Screen.Recording.2024-11-04.at.8.17.09.PM.mov

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[github-actions]

Branch preview

• Documentation Site
• Storybook

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• High Contrast Mode | Medium | LTR
• Spectrum | Light | Medium | LTR
• Spectrum | Light | Medium | RTL
• Spectrum | Light | Large | LTR
• Spectrum | Light | Large | RTL
• Spectrum | Dark | Medium | LTR
• Spectrum | Dark | Medium | RTL
• Spectrum | Dark | Large | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Light | Medium | RTL
• Express | Light | Large | LTR
• Express | Light | Large | RTL
• Express | Dark | Medium | LTR
• Express | Dark | Medium | RTL
• Express | Dark | Large | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Light | Medium | RTL
• Spectrum-two | Light | Large | LTR
• Spectrum-two | Light | Large | RTL
• Spectrum-two | Dark | Medium | LTR
• Spectrum-two | Dark | Medium | RTL
• Spectrum-two | Dark | Large | LTR
• Spectrum-two | Dark | Large | RTL

[coveralls]

Pull Request Test Coverage Report for Build 11744270695

Details

• 6 of 6 (100.0%) changed or added relevant lines in 1 file are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 98.191%

---

Totals
Change from base Build 11744036053:	0.0%
Covered Lines:	32317
Relevant Lines:	32735

---

💛 - Coveralls

[github-actions]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.98	0.99	0.99
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	250.448 kB	236.36 kB 🏆	236.563 kB
Scripts	60.392 kB	54.113 kB	54.002 kB 🏆
Stylesheet	54.025 kB	47.833 kB 🏆	48.073 kB
Document	6.19 kB	5.468 kB	5.464 kB 🏆
Font	126.941 kB	126.596 kB 🏆	126.676 kB

Request Count

Category	Latest	Main	Branch
Total	52	52	52
Scripts	41	41	41
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

[github-actions]

Tachometer results

Chrome

number-field permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	795 kB	74.25ms - 75.34ms	-	faster ✔ 8% - 11% 6.70ms - 8.91ms
branch	770 kB	81.64ms - 83.56ms	slower ❌ 9% - 12% 6.70ms - 8.91ms	-

slider permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	742 kB	77.25ms - 79.83ms	-	faster ✔ 2% - 6% 1.34ms - 5.02ms
branch	717 kB	80.42ms - 83.03ms	slower ❌ 2% - 6% 1.34ms - 5.02ms	-

Firefox

number-field permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	795 kB	157.56ms - 163.84ms	-	faster ✔ 6% - 11% 10.37ms - 19.51ms
branch	770 kB	172.32ms - 178.96ms	slower ❌ 6% - 12% 10.37ms - 19.51ms	-

slider permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	742 kB	162.03ms - 170.21ms	-	unsure 🔍 -6% - +0% -11.00ms - +0.76ms
branch	717 kB	167.02ms - 175.46ms	unsure 🔍 -1% - +7% -0.76ms - +11.00ms	-

[rubencarvalho]

Thank you for fixing this!
Could we add a test that clicks the multiple buttons and checks the right value (not rounded) is in the input?
Also, we will need to update the golden images cache because we have a new story 😄