Fix step any in number selector (#19077)

home-assistant · Dec 18, 2023 · 325ad6f · 325ad6f
1 parent d762a93
commit 325ad6f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
@@ -43,6 +43,22 @@ export class HaNumberSelector extends LitElement {
       this.selector.number?.min === undefined ||
       this.selector.number?.max === undefined;
 
+    let sliderStep;
+
+    if (!isBox) {
+      sliderStep = this.selector.number!.step ?? 1;
+      if (sliderStep === "any") {
+        sliderStep = 1;
+        // divide the range of the slider by 100 steps
+        const step =
+          (this.selector.number!.max! - this.selector.number!.min!) / 100;
+        // biggest step size is 1, round the step size to a division of 1
+        while (sliderStep > step) {
+          sliderStep /= 10;
+        }
+      }
+    }
+
     return html`
       <div class="input">
         ${!isBox
@@ -52,12 +68,10 @@ export class HaNumberSelector extends LitElement {
                 : ""}
               <ha-slider
                 labeled
-                .min=${this.selector.number?.min}
-                .max=${this.selector.number?.max}
+                .min=${this.selector.number!.min}
+                .max=${this.selector.number!.max}
                 .value=${this.value ?? ""}
-                .step=${this.selector.number?.step === "any"
-                  ? undefined
-                  : this.selector.number?.step ?? 1}
+                .step=${sliderStep}
                 .disabled=${this.disabled}
                 .required=${this.required}
                 @change=${this._handleSliderChange}

diff --git a/src/components/ha-selector/ha-selector-selector.ts b/src/components/ha-selector/ha-selector-selector.ts
@@ -70,15 +70,15 @@ const SELECTOR_SCHEMAS = {
   number: [
     {
       name: "min",
-      selector: { number: { mode: "box" } },
+      selector: { number: { mode: "box", step: "any" } },
     },
     {
       name: "max",
-      selector: { number: { mode: "box" } },
+      selector: { number: { mode: "box", step: "any" } },
     },
     {
       name: "step",
-      selector: { number: { mode: "box" } },
+      selector: { number: { mode: "box", step: "any" } },
     },
   ] as const,
   object: [] as const,