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

packages/number-field/src/NumberField.ts

@@ -495,7 +495,7 @@ 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 = Math.round((value - min) % this.step);
             const fallsOnStep = moduloStep === 0;
             if (!fallsOnStep) {
                 const overUnder = Math.round(moduloStep / this.step);

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

@@ -314,6 +314,27 @@ describe('NumberField - inputs', () => {
             expect(el.value).to.equal(255);
         });
     });
+    describe('user suplied fractional 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;">