From dfe2ede2945ab4473081ad4995eae6a0dff90355 Mon Sep 17 00:00:00 2001
From: nikolajlauridsen <nikolajlauridsen@protonmail.ch>
Date: Mon, 18 Nov 2024 14:47:51 +0100
Subject: [PATCH] Make slider handle decimal values

---
 .../lib/uui-range-slider.element.ts           | 33 +++++++++++++++++--
 packages/uui-slider/lib/uui-slider.element.ts | 13 +++++---
 packages/uui-slider/lib/uui-slider.story.ts   |  9 +++++
 3 files changed, 48 insertions(+), 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
index 19702e2d0..d8b0680a9 100644
--- 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
index dd1f750a9..81ad5d919 100644
--- a/packages/uui-slider/lib/uui-slider.element.ts
+++ b/packages/uui-slider/lib/uui-slider.element.ts
@@ -35,9 +35,7 @@ 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
         >`,
     )}
@@ -45,7 +43,14 @@ const RenderStepValues = (
 };
 
 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
index af730a803..95288bb2f 100644
--- 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,
+  },
+};