Make slider handle decimal values

umbraco · Nov 18, 2024 · dfe2ede · dfe2ede
1 parent ed30b6d
commit dfe2ede
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git a/packages/uui-range-slider/lib/uui-range-slider.element.ts b/packages/uui-range-slider/lib/uui-range-slider.element.ts
@@ -16,6 +16,14 @@ const TRACK_HEIGHT = 3;
 const TRACK_PADDING = 12;
 const STEP_MIN_WIDTH = 24;
 
+const CountDecimalPlaces = (num: number) => {
+  const decimalIndex = num.toString().indexOf('.');
+  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
+};
+
+const RoundToDecimalPlaces = (target: number, decimalPlaces: number) =>
+  Number(target.toFixed(decimalPlaces));
+
 // TODO: ability to focus on the range, to enable keyboard interaction to move the range.
 // TODO: Ability to click outside a range, to move the range if the maxGap has been reached.
 // TODO: .
@@ -624,8 +632,22 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
 
   private _renderThumbValues() {
     return html`<div class="thumb-values">
-      <span><span>${this._lowInputValue}</span></span>
-      <span><span>${this._highInputValue}</span></span>
+      <span
+        ><span
+          >${RoundToDecimalPlaces(
+            this._lowInputValue,
+            CountDecimalPlaces(this._step),
+          )}</span
+        ></span
+      >
+      <span
+        ><span
+          >${RoundToDecimalPlaces(
+            this._highInputValue,
+            CountDecimalPlaces(this._step),
+          )}</span
+        ></span
+      >
     </div>`;
   }
 
@@ -656,7 +678,12 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
     let index = 0;
     const stepValues = new Array(stepAmount + 1)
       .fill(this._step)
-      .map(step => this._min + step * index++);
+      .map(step =>
+        RoundToDecimalPlaces(
+          this._min + step * index++,
+          CountDecimalPlaces(this._step),
+        ),
+      );
 
     return html`<div class="step-values">
       ${stepValues.map(value => html`<span><span>${value}</span></span>`)}

diff --git a/packages/uui-slider/lib/uui-slider.element.ts b/packages/uui-slider/lib/uui-slider.element.ts
@@ -35,17 +35,22 @@ const RenderStepValues = (
       el =>
         html` <span
           ><span>
-            ${steps.length <= 20 && stepWidth >= STEP_MIN_WIDTH
-              ? el.toFixed(0)
-              : nothing}
+            ${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) => start + i * step);
+  Array.from({ length: (stop - start) / step + 1 }, (_, i) =>
+    Number((start + i * step).toFixed(CountDecimalPlaces(step))),
+  );
+
+const CountDecimalPlaces = (num: number) => {
+  const decimalIndex = num.toString().indexOf('.');
+  return decimalIndex >= 0 ? num.toString().length - decimalIndex - 1 : 0;
+};
 
 /**
  * @element uui-slider

diff --git a/packages/uui-slider/lib/uui-slider.story.ts b/packages/uui-slider/lib/uui-slider.story.ts
@@ -56,3 +56,12 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const DecimalValue: Story = {
+  args: {
+    min: 0,
+    max: 1,
+    step: 0.1,
+    value: 0.5,
+  },
+};