Put number selector label above the input (#21835)

src/components/ha-selector/ha-selector-number.ts

@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -60,12 +67,10 @@ export class HaNumberSelector extends LitElement {
     }
 
     return html`
+      ${this.label ? html`${this.label}${this.required ? "*" : ""}` : nothing}
       <div class="input">
         ${!isBox
           ? html`
-              ${this.label
-                ? html`${this.label}${this.required ? "*" : ""}`
-                : ""}
               <ha-slider
                 labeled
                 .min=${this.selector.number!.min}
@@ -75,10 +80,11 @@ export class HaNumberSelector extends LitElement {
                 .disabled=${this.disabled}
                 .required=${this.required}
                 @change=${this._handleSliderChange}
+                .ticks=${this.selector.number?.slider_ticks}
               >
               </ha-slider>
             `
-          : ""}
+          : nothing}
         <ha-textfield
           .inputMode=${this.selector.number?.step === "any" ||
           (this.selector.number?.step ?? 1) % 1 !== 0
@@ -105,7 +111,7 @@ export class HaNumberSelector extends LitElement {
       </div>
       ${!isBox && this.helper
         ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
+        : nothing}
     `;
   }
 
@@ -141,6 +147,9 @@ export class HaNumberSelector extends LitElement {
       }
       ha-slider {
         flex: 1;
+        margin-right: 16px;
+        margin-inline-end: 16px;
+        margin-inline-start: 0;
       }
       ha-textfield {
         --ha-textfield-input-width: 40px;

src/components/ha-slider.ts

@@ -20,6 +20,7 @@ export class HaSlider extends MdSlider {
         --md-sys-color-on-surface: var(--primary-text-color);
         --md-slider-handle-width: 14px;
         --md-slider-handle-height: 14px;
+        --md-slider-state-layer-size: 24px;
         min-width: 100px;
         min-inline-size: 100px;
         width: 200px;

src/data/selector.ts

@@ -323,6 +323,7 @@ export interface NumberSelector {
     step?: number | "any";
     mode?: "box" | "slider";
     unit_of_measurement?: string;
+    slider_ticks?: boolean;
   } | null;
 }
 

src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts

@@ -36,6 +36,7 @@ export class HuiDialogEditSection extends LitElement {
             number: {
               min: 1,
               max: maxColumns,
+              slider_ticks: true,
             },
           },
         },

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -77,6 +77,7 @@ export class HuiViewEditor extends LitElement {
                     min: 1,
                     max: 10,
                     mode: "slider",
+                    slider_ticks: true,
                   },
                 },
               },