diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index ba60452493..418432ef27 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/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}
${!isBox
? html`
- ${this.label
- ? html`${this.label}${this.required ? "*" : ""}`
- : ""}
`
- : ""}
+ : nothing}
${!isBox && this.helper
? html`${this.helper}`
- : ""}
+ : 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;
diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
index 33a1fbb16d..df91f81970 100644
--- a/src/components/ha-slider.ts
+++ b/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;
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 6b17b4414b..036fa0bc86 100644
--- a/src/data/selector.ts
+++ b/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;
}
diff --git a/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts b/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts
index 7f9c176d04..d7a9a96749 100644
--- a/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts
+++ b/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,
},
},
},
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
index ff0c8465b3..04cac1ac5b 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/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,
},
},
},