diff --git a/demo/src/configs/jimpower/theme.ts b/demo/src/configs/jimpower/theme.ts
index 7e304eb6c6b1..246b3b22bde4 100644
--- a/demo/src/configs/jimpower/theme.ts
+++ b/demo/src/configs/jimpower/theme.ts
@@ -4,16 +4,11 @@ export const demoThemeJimpower = () => ({
"primary-color": "#5294E2",
"label-badge-red": "var(--accent-color)",
"paper-tabs-selection-bar-color": "green",
- "paper-slider-knob-color": "var(--accent-color)",
"light-primary-color": "var(--accent-color)",
"primary-background-color": "#383C45",
"primary-text-color": "#FFFFFF",
"paper-item-selected_-_background-color": "#434954",
- "paper-slider-active-color": "var(--accent-color)",
"secondary-background-color": "#383C45",
- "paper-slider-container-color":
- "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
- "paper-slider-disabled-active-color": "var(--disabled-text-color)",
"disabled-text-color": "#7F848E",
"paper-item-icon_-_color": "green",
"paper-grey-200": "#414A59",
@@ -32,14 +27,10 @@ export const demoThemeJimpower = () => ({
"switch-unchecked-button-color": "var(--disabled-text-color)",
"label-badge-border-color": "green",
"paper-listbox-color": "var(--primary-color)",
- "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
"card-background-color": "#434954",
"label-badge-text-color": "var(--primary-text-color)",
- "paper-slider-knob-start-color": "var(--accent-color)",
"switch-unchecked-track-color": "var(--disabled-text-color)",
"dark-primary-color": "var(--accent-color)",
- "paper-slider-secondary-color": "var(--secondary-background-color)",
- "paper-slider-pin-color": "var(--accent-color)",
"paper-item-icon-active-color": "#F9C536",
"accent-color": "#E45E65",
"table-row-alternative-background-color": "#3E424B",
diff --git a/demo/src/configs/kernehed/theme.ts b/demo/src/configs/kernehed/theme.ts
index ffb2f0edfe13..28433aba5de1 100644
--- a/demo/src/configs/kernehed/theme.ts
+++ b/demo/src/configs/kernehed/theme.ts
@@ -5,17 +5,12 @@ export const demoThemeKernehed = () => ({
"primary-color": "#2980b9",
"label-badge-red": "var(--accent-color)",
"paper-tabs-selection-bar-color": "green",
- "paper-slider-knob-color": "var(--accent-color)",
"primary-text-color": "#FFFFFF",
"light-primary-color": "var(--accent-color)",
"primary-background-color": "#222222",
"sidebar-icon-color": "#777777",
"paper-item-selected_-_background-color": "#292929",
- "paper-slider-active-color": "var(--accent-color)",
"secondary-background-color": "#222222",
- "paper-slider-container-color":
- "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
- "paper-slider-disabled-active-color": "var(--disabled-text-color)",
"disabled-text-color": "#777777",
"paper-item-icon_-_color": "green",
"paper-grey-200": "#222222",
@@ -33,14 +28,10 @@ export const demoThemeKernehed = () => ({
"switch-unchecked-button-color": "var(--disabled-text-color)",
"label-badge-border-color": "green",
"paper-listbox-color": "#777777",
- "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
"card-background-color": "#292929",
"label-badge-text-color": "var(--primary-text-color)",
- "paper-slider-knob-start-color": "var(--accent-color)",
"switch-unchecked-track-color": "var(--disabled-text-color)",
"dark-primary-color": "var(--accent-color)",
- "paper-slider-secondary-color": "var(--secondary-background-color)",
- "paper-slider-pin-color": "var(--accent-color)",
"paper-item-icon-active-color": "#b58e31",
"accent-color": "#2980b9",
"table-row-alternative-background-color": "#292929",
diff --git a/demo/src/configs/teachingbirds/theme.ts b/demo/src/configs/teachingbirds/theme.ts
index 34687a23f104..f61654406c5d 100644
--- a/demo/src/configs/teachingbirds/theme.ts
+++ b/demo/src/configs/teachingbirds/theme.ts
@@ -1,6 +1,5 @@
export const demoThemeTeachingbirds = () => ({
"paper-card-header-color": "var(--paper-item-icon-color)",
- "paper-slider-pin-color": "var(--primary-color)",
"paper-listbox-background-color": "#202020",
"paper-grey-50": "var(--primary-text-color)",
"paper-item-icon-color": "#d3d3d3",
@@ -8,8 +7,6 @@ export const demoThemeTeachingbirds = () => ({
"primary-color": "#389638",
"light-primary-color": "#6f956f",
"label-badge-red": "var(--primary-color)",
- "paper-slider-secondary-color": "var(--light-primary-color)",
- "paper-slider-knob-color": "var(--primary-color)",
"paper-listbox-color": "#FFFFFF",
"paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
"switch-unchecked-track-color": "var(--primary-text-color)",
@@ -17,9 +14,7 @@ export const demoThemeTeachingbirds = () => ({
"label-badge-text-color": "var(--text-primary-color)",
"primary-background-color": "#303030",
"sidebar-icon-color": "var(--paper-item-icon-color)",
- "paper-slider-active-color": "#d8bf50",
"secondary-background-color": "#2b2b2b",
- "paper-slider-knob-start-color": "var(--primary-color)",
"paper-item-icon-active-color": "#d8bf50",
"switch-checked-color": "var(--primary-color)",
"secondary-text-color": "#389638",
diff --git a/gallery/src/pages/components/ha-control-circular-slider.ts b/gallery/src/pages/components/ha-control-circular-slider.ts
index f85f210dd028..4a856fe31b15 100644
--- a/gallery/src/pages/components/ha-control-circular-slider.ts
+++ b/gallery/src/pages/components/ha-control-circular-slider.ts
@@ -49,11 +49,11 @@ export class DemoHaCircularSlider extends LitElement {
Current
${this.current} °C
diff --git a/gallery/src/pages/components/ha-hs-color-picker.ts b/gallery/src/pages/components/ha-hs-color-picker.ts
index 53eaf2187687..7092c399e8fc 100644
--- a/gallery/src/pages/components/ha-hs-color-picker.ts
+++ b/gallery/src/pages/components/ha-hs-color-picker.ts
@@ -57,8 +57,8 @@ export class DemoHaHsColorPicker extends LitElement {
>
Hue : ${this.value[0]}
Saturation : ${this.value[1]}
Color Brighness : ${this.brightness}
- :host {
- display: block;
- }
-
- .title {
- margin: 5px 0 8px;
- color: var(--primary-text-color);
- }
-
- .slider-container {
- display: flex;
- }
-
- ha-icon {
- margin-top: 4px;
- color: var(--secondary-text-color);
- }
-
- ha-slider {
- flex-grow: 1;
- background-image: var(--ha-slider-background);
- border-radius: 4px;
- }
-
-
- [[_getTitle()]]
-
-
-
-
-
-
- [[helper]]
-
- `;
- }
-
- _getTitle() {
- return `${this.caption}${this.caption && this.required ? " *" : ""}`;
- }
-
- static get properties() {
- return {
- caption: String,
- disabled: Boolean,
- required: Boolean,
- min: Number,
- max: Number,
- pin: Boolean,
- step: Number,
- helper: String,
-
- extra: {
- type: Boolean,
- value: false,
- },
- ignoreBarTouch: {
- type: Boolean,
- value: true,
- },
- icon: {
- type: String,
- value: "",
- },
- value: {
- type: Number,
- notify: true,
- },
- };
- }
-}
-
-customElements.define("ha-labeled-slider", HaLabeledSlider);
diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts
new file mode 100644
index 000000000000..366eb4f5555c
--- /dev/null
+++ b/src/components/ha-labeled-slider.ts
@@ -0,0 +1,96 @@
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "./ha-icon";
+import "./ha-slider";
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("ha-labeled-slider")
+class HaLabeledSlider extends LitElement {
+ @property() public labeled? = false;
+
+ @property() public caption?: string;
+
+ @property() public disabled?: boolean;
+
+ @property() public required?: boolean;
+
+ @property() public min: number = 0;
+
+ @property() public max: number = 100;
+
+ @property() public step: number = 1;
+
+ @property() public helper?: string;
+
+ @property() public extra = false;
+
+ @property() public icon?: string;
+
+ @property() public value?: number;
+
+ protected render() {
+ return html`
+ ${this._getTitle()}
+
+
+ ${this.icon ? html`` : nothing}
+
+
+ ${this.helper
+ ? html` ${this.helper} `
+ : nothing}
+ `;
+ }
+
+ private _getTitle(): string {
+ return `${this.caption}${this.caption && this.required ? " *" : ""}`;
+ }
+
+ private _inputChanged(ev) {
+ fireEvent(this, "value-changed", {
+ value: Number((ev.target as any).value),
+ });
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ :host {
+ display: block;
+ }
+
+ .title {
+ margin: 5px 0 8px;
+ color: var(--primary-text-color);
+ }
+
+ .slider-container {
+ display: flex;
+ }
+
+ ha-icon {
+ margin-top: 8px;
+ color: var(--secondary-text-color);
+ }
+
+ ha-slider {
+ flex-grow: 1;
+ background-image: var(--ha-slider-background);
+ border-radius: 4px;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-labeled-slider": HaLabeledSlider;
+ }
+}
diff --git a/src/components/ha-selector/ha-selector-color-temp.ts b/src/components/ha-selector/ha-selector-color-temp.ts
index 7a99a61261d8..f896c5fc5e5b 100644
--- a/src/components/ha-selector/ha-selector-color-temp.ts
+++ b/src/components/ha-selector/ha-selector-color-temp.ts
@@ -24,7 +24,7 @@ export class HaColorTempSelector extends LitElement {
protected render() {
return html`
`;
}
private _valueChanged(ev: CustomEvent) {
fireEvent(this, "value-changed", {
- value: Number((ev.target as any).value),
+ value: Number((ev.detail as any).value),
});
}
static styles = css`
ha-labeled-slider {
- --ha-slider-background: -webkit-linear-gradient(
- var(--float-end),
+ --ha-slider-background: linear-gradient(
+ to var(--float-end),
rgb(255, 160, 0) 0%,
white 50%,
rgb(166, 209, 255) 100%
);
- /* The color temp minimum value shouldn't be rendered differently. It's not "off". */
- --paper-slider-knob-start-border-color: var(--primary-color);
}
`;
}
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index 0ed0c0297108..d7242e70759e 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -48,6 +48,7 @@ export class HaNumberSelector extends LitElement {
? html`${this.label}${this.required ? "*" : ""}`
: ""}
diff --git a/src/components/ha-slider.js b/src/components/ha-slider.js
deleted file mode 100644
index 11cda48db133..000000000000
--- a/src/components/ha-slider.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import "@polymer/paper-slider";
-
-const PaperSliderClass = customElements.get("paper-slider");
-let subTemplate;
-
-export class HaSlider extends PaperSliderClass {
- static get template() {
- if (!subTemplate) {
- subTemplate = PaperSliderClass.template.cloneNode(true);
-
- const superStyle = subTemplate.content.querySelector("style");
-
- // append style to add mirroring of pin in RTL
- superStyle.appendChild(
- document.createTextNode(`
- :host([dir="rtl"]) #sliderContainer.pin.expand > .slider-knob > .slider-knob-inner::after {
- -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
- transform: scale(1) translate(0, -17px) scaleX(-1) !important;
- }
-
- .pin > .slider-knob > .slider-knob-inner {
- font-size: var(--ha-slider-pin-font-size, 15px);
- line-height: normal;
- cursor: pointer;
- }
-
- .disabled.ring > .slider-knob > .slider-knob-inner {
- background-color: var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
- border: 2px solid var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
- }
-
- .pin > .slider-knob > .slider-knob-inner::before {
- top: unset;
- margin-left: unset;
-
- bottom: calc(15px + var(--calculated-paper-slider-height)/2);
- left: 50%;
- width: 2.6em;
- height: 2.6em;
-
- -webkit-transform-origin: left bottom;
- transform-origin: left bottom;
- -webkit-transform: rotate(-45deg) scale(0) translate(0);
- transform: rotate(-45deg) scale(0) translate(0);
- }
-
- .pin.expand > .slider-knob > .slider-knob-inner::before {
- -webkit-transform: rotate(-45deg) scale(1) translate(7px, -7px);
- transform: rotate(-45deg) scale(1) translate(7px, -7px);
- }
-
- .pin > .slider-knob > .slider-knob-inner::after {
- top: unset;
- font-size: unset;
-
- bottom: calc(15px + var(--calculated-paper-slider-height)/2);
- left: 50%;
- margin-left: -1.3em;
- width: 2.6em;
- height: 2.5em;
-
- -webkit-transform-origin: center bottom;
- transform-origin: center bottom;
- -webkit-transform: scale(0) translate(0);
- transform: scale(0) translate(0);
- }
-
- .pin.expand > .slider-knob > .slider-knob-inner::after {
- -webkit-transform: scale(1) translate(0, -10px);
- transform: scale(1) translate(0, -10px);
- }
-
- .slider-input {
- width: 54px;
- }
- `)
- );
- }
- return subTemplate;
- }
-
- _setImmediateValue(newImmediateValue) {
- super._setImmediateValue(
- this.step >= 1
- ? Math.round(newImmediateValue)
- : Math.round(newImmediateValue * 100) / 100
- );
- }
-
- _calcStep(value) {
- if (!this.step) {
- return parseFloat(value);
- }
-
- const numSteps = Math.round((value - this.min) / this.step);
- const stepStr = this.step.toString();
- const stepPointAt = stepStr.indexOf(".");
- if (stepPointAt !== -1) {
- /**
- * For small values of this.step, if we calculate the step using
- * For non-integer values of this.step, if we calculate the step using
- * `Math.round(value / step) * step` we may hit a precision point issue
- * eg. 0.1 * 0.2 = 0.020000000000000004
- * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
- *
- * as a work around we can round with the decimal precision of `step`
- */
- const precision = 10 ** (stepStr.length - stepPointAt - 1);
- return (
- Math.round((numSteps * this.step + this.min) * precision) / precision
- );
- }
-
- return numSteps * this.step + this.min;
- }
-}
-customElements.define("ha-slider", HaSlider);
diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts
new file mode 100644
index 000000000000..5a902233e789
--- /dev/null
+++ b/src/components/ha-slider.ts
@@ -0,0 +1,26 @@
+import { customElement } from "lit/decorators";
+import { MdSlider } from "@material/web/slider/slider";
+import { CSSResult, css } from "lit";
+
+@customElement("ha-slider")
+export class HaSlider extends MdSlider {
+ static override styles: CSSResult[] = [
+ ...MdSlider.styles,
+ css`
+ :host {
+ --md-sys-color-primary: var(--primary-color);
+ --md-sys-color-outline: var(--outline-color);
+
+ min-width: 100px;
+ min-inline-size: 100px;
+ width: 200px;
+ }
+ `,
+ ];
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-slider": HaSlider;
+ }
+}
diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
index 2bf8a5b44b40..de42e5b054c5 100644
--- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
@@ -115,46 +115,50 @@ class LightRgbColorPicker extends LitElement {
${supportsRgbw || supportsRgbww
? html``
: nothing}
${supportsRgbw
? html`
`
: nothing}
${supportsRgbww
? html`
`
: nothing}
@@ -302,9 +306,9 @@ class LightRgbColorPicker extends LitElement {
}
private _wvSliderChanged(ev: CustomEvent) {
- const target = ev.target as any;
+ const target = ev.detail as any;
let wv = Number(target.value);
- const name = target.name;
+ const name = (ev.target as any).name;
if (isNaN(wv)) {
return;
@@ -351,7 +355,7 @@ class LightRgbColorPicker extends LitElement {
}
private _colorBrightnessSliderChanged(ev: CustomEvent) {
- const target = ev.target as any;
+ const target = ev.detail as any;
let value = Number(target.value);
if (isNaN(value)) {
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index 044745d78dd4..c779299333b8 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -128,9 +128,8 @@ class MoreInfoMediaPlayer extends LitElement {
${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
? html`
${this.hass.formatEntityState(stateObj)}
diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
index 36bc2bb76a39..4bb1f65cfb6c 100644
--- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
@@ -252,11 +252,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
? html`
`
diff --git a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
index 83fabc5f5be8..d6f41ef34a67 100644
--- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
@@ -89,15 +89,14 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
? html`
${this.hass.formatEntityState(stateObj)}
diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts
index a365bb97200e..3e0b312f50d3 100644
--- a/src/panels/media-browser/ha-bar-media-player.ts
+++ b/src/panels/media-browser/ha-bar-media-player.ts
@@ -293,6 +293,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
.path=${mdiVolumeHigh}
>
--primary-background-color: #fafafa;
--secondary-background-color: #e5e5e5; /* behind the cards on state */
--clear-background-color: #ffffff;
-
+
/* for header */
--header-height: 56px;
@@ -418,6 +418,11 @@ documentContainer.innerHTML = `
line-height: 20px;
};
+ direction: ltr;
+ --direction: ltr;
+ --float-start: left;
+ --float-end: right;
+
${Object.entries(derivedStyles)
.map(([key, value]) => `--${key}: ${value};`)
.join("")}
diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts
index 6d60dcab7d2a..f172d9e69f29 100644
--- a/src/resources/styles-data.ts
+++ b/src/resources/styles-data.ts
@@ -79,13 +79,6 @@ export const derivedStyles = {
"table-header-background-color": "var(--input-fill-color)",
"table-row-background-color": "var(--primary-background-color)",
"table-row-alternative-background-color": "var(--secondary-background-color)",
- "paper-slider-knob-color": "var(--slider-color)",
- "paper-slider-knob-start-color": "var(--slider-color)",
- "paper-slider-pin-color": "var(--slider-color)",
- "paper-slider-pin-start-color": "var(--slider-color)",
- "paper-slider-active-color": "var(--slider-color)",
- "paper-slider-secondary-color": "var(--slider-secondary-color)",
- "paper-slider-container-color": "var(--slider-track-color)",
"data-table-background-color": "var(--card-background-color)",
"markdown-code-background-color": "var(--primary-background-color)",
diff --git a/src/state-summary/state-card-input_number.ts b/src/state-summary/state-card-input_number.ts
index 0b3d3b822f19..a389da6bd265 100644
--- a/src/state-summary/state-card-input_number.ts
+++ b/src/state-summary/state-card-input_number.ts
@@ -57,15 +57,14 @@ class StateCardInputNumber extends LitElement {
? html`
${this.hass.formatEntityState(this.stateObj)}
diff --git a/src/state-summary/state-card-number.js b/src/state-summary/state-card-number.js
index be4349be64e9..dc59854da25c 100644
--- a/src/state-summary/state-card-number.js
+++ b/src/state-summary/state-card-number.js
@@ -18,6 +18,7 @@ class StateCardNumber extends mixinBehaviors(