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, }, }, },