fix(number-field, slider): floating point roundoff precision bug

packages/number-field/src/NumberField.ts

@@ -495,7 +495,9 @@ export class NumberField extends TextfieldBase {
         // Step shouldn't validate when 0...
         if (this.step) {
             const min = typeof this.min !== 'undefined' ? this.min : 0;
-            const moduloStep = (value - min) % this.step;
+            const moduloStep = parseFloat(
+                this.valueFormatter.format((value - min) % this.step)
+            );
             const fallsOnStep = moduloStep === 0;
             if (!fallsOnStep) {
                 const overUnder = Math.round(moduloStep / this.step);
@@ -510,6 +512,7 @@ export class NumberField extends TextfieldBase {
                     value -= this.step;
                 }
             }
+            value = parseFloat(this.valueFormatter.format(value));
         }
         value *= signMultiplier;
         return value;
@@ -560,8 +563,23 @@ export class NumberField extends TextfieldBase {
             : this._numberFormatter;
     }
 
+    protected get valueFormatter(): NumberFormatter {
+        if (this.step && !this._valueFormatter) {
+            const digitsAfterDecimal =
+                this.step != Math.floor(this.step)
+                    ? this.step.toString().split('.')[1].length
+                    : 0;
+            this._valueFormatter = new NumberFormatter(
+                this.languageResolver.language,
+                { maximumFractionDigits: digitsAfterDecimal }
+            );
+        }
+
+        return this._valueFormatter;
+    }
     private _numberFormatter?: NumberFormatter;
     private _numberFormatterFocused?: NumberFormatter;
+    private _valueFormatter!: NumberFormatter;
 
     protected get numberParser(): NumberParser {
         if (!this._numberParser || !this._numberParserFocused) {
@@ -685,6 +703,18 @@ export class NumberField extends TextfieldBase {
             );
             this.value = value;
         }
+        if (changes.has('step')) {
+            if (this.step) {
+                const digitsAfterDecimal =
+                    this.step != Math.floor(this.step)
+                        ? this.step.toString().split('.')[1].length
+                        : 0;
+                this._valueFormatter = new NumberFormatter(
+                    this.languageResolver.language,
+                    { maximumFractionDigits: digitsAfterDecimal }
+                );
+            }
+        }
         super.update(changes);
     }
 

packages/number-field/test/inputs.test.ts

@@ -314,6 +314,27 @@ describe('NumberField - inputs', () => {
             expect(el.value).to.equal(255);
         });
     });
+    describe('with floating point numbers', () => {
+        it('do not crash the Number Field', async () => {
+            const el = await getElFrom(minMax(minMax.args));
+            el.setAttribute('min', '0.1');
+            el.setAttribute('step', '0.01');
+            el.setAttribute('value', '0.5');
+            await elementUpdated(el);
+
+            el.focus();
+            await sendKeys({
+                type: '6',
+            });
+            await elementUpdated(el);
+            expect(el.formattedValue).to.equal('0.56');
+            await sendKeys({
+                press: 'Enter',
+            });
+            await elementUpdated(el);
+            expect(el.value).to.equal(0.56);
+        });
+    });
     describe('locale specific', () => {
         it('can determine the group symbol', async () => {
             const [languageContext] = createLanguageContext('es-ES');

packages/slider/stories/slider.stories.ts

@@ -450,6 +450,32 @@ editableWithDefaultValue.swc_vrt = {
     skip: true,
 };
 
+export const editableWithFractionValue = (
+    args: StoryArgs = {}
+): TemplateResult => {
+    return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider
+                editable
+                max="255"
+                min="0.1"
+                value="0.5"
+                step="0.01"
+                default-value="18"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                ...=${spreadProps(args)}
+            >
+                Angle
+            </sp-slider>
+        </div>
+    `;
+};
+
+editableWithFractionValue.swc_vrt = {
+    skip: true,
+};
+
 export const editableDisabled = (args: StoryArgs = {}): TemplateResult => {
     return html`
         <div style="width: 500px; margin: 12px 20px;">