Remove Number conversion

umbraco · Nov 18, 2024 · ef667b3 · ef667b3
1 parent 28e6623
commit ef667b3
Showing 1 changed file with 34 additions and 36 deletions.
diff --git a/packages/uui-slider/lib/uui-slider.element.ts b/packages/uui-slider/lib/uui-slider.element.ts
@@ -11,41 +11,8 @@ import { UUISliderEvent } from './UUISliderEvent';
 const TRACK_PADDING = 12;
 const STEP_MIN_WIDTH = 24;
 
-const RenderTrackSteps = (steps: number[], stepWidth: number) => {
-  return svg`
-  ${steps.map(el => {
-    if (stepWidth >= STEP_MIN_WIDTH) {
-      const x = Math.round(TRACK_PADDING + stepWidth * steps.indexOf(el));
-      return svg`<circle class="track-step" cx="${x}" cy="50%" r="4.5" />`;
-    }
-    return svg``;
-  })}
-`;
-};
-
-const RenderStepValues = (
-  steps: number[],
-  stepWidth: number,
-  hide: boolean,
-) => {
-  if (hide) return nothing;
-
-  return html`<div id="step-values">
-    ${steps.map(
-      el =>
-        html` <span
-          ><span>
-            ${steps.length <= 20 && stepWidth >= STEP_MIN_WIDTH ? el : nothing}
-          </span></span
-        >`,
-    )}
-  </div>`;
-};
-
 const GenerateStepArray = (start: number, stop: number, step: number) =>
-  Array.from({ length: (stop - start) / step + 1 }, (_, i) =>
-    Number((start + i * step).toFixed(CountDecimalPlaces(step))),
-  );
+  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
 
 const CountDecimalPlaces = (num: number) => {
   const decimalIndex = num.toString().indexOf('.');
@@ -300,6 +267,37 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
     this.dispatchEvent(new UUISliderEvent(UUISliderEvent.CHANGE));
   }
 
+  RenderTrackSteps() {
+    return svg`
+  ${this._steps.map(el => {
+    if (this._stepWidth >= STEP_MIN_WIDTH) {
+      const x = Math.round(
+        TRACK_PADDING + this._stepWidth * this._steps.indexOf(el),
+      );
+      return svg`<circle class="track-step" cx="${x}" cy="50%" r="4.5" />`;
+    }
+    return svg``;
+  })}
+`;
+  }
+
+  RenderStepValues() {
+    if (this.hideStepValues) return nothing;
+
+    return html`<div id="step-values">
+      ${this._steps.map(
+        el =>
+          html` <span
+            ><span>
+              ${this._steps.length <= 20 && this._stepWidth >= STEP_MIN_WIDTH
+                ? el.toFixed(CountDecimalPlaces(this.step))
+                : nothing}
+            </span></span
+          >`,
+      )}
+    </div>`;
+  }
+
   render() {
     return html`
       <input
@@ -317,7 +315,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
       <div id="track" aria-hidden="true">
         <svg height="100%" width="100%">
           <rect x="9" y="9" height="3" rx="2" />
-          ${RenderTrackSteps(this._steps, this._stepWidth)}
+          ${this.RenderTrackSteps()}
         </svg>
 
         <div id="track-inner" aria-hidden="true">
@@ -328,7 +326,7 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
           </div>
         </div>
       </div>
-      ${RenderStepValues(this._steps, this._stepWidth, this.hideStepValues)}
+      ${this.RenderStepValues()}
     `;
   }