diff --git a/polymer.json b/polymer.json
index d0e3496de7..47df9b9c7d 100644
--- a/polymer.json
+++ b/polymer.json
@@ -24,7 +24,6 @@
"filesToIgnore": [
"**/*.html",
"**/src/panels/config/js/**/*.js",
- "**/ha-paper-slider.js",
"**/ha-iconset-svg.js",
"**/ha-script-editor.js",
"**/ha-automation-editor.js",
diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts
index 27ef43a53e..9fab3cabc0 100644
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -14,7 +14,7 @@ import {
} from "lit-element";
import { fireEvent } from "../../common/dom/fire_event";
import { HaCheckbox } from "../ha-checkbox";
-import "../ha-paper-slider";
+import "../ha-slider";
import {
HaFormElement,
HaFormIntegerData,
@@ -31,7 +31,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
@property() public suffix?: string;
- @query("paper-input ha-paper-slider") private _input?: HTMLElement;
+ @query("paper-input ha-slider") private _input?: HTMLElement;
public focus() {
if (this._input) {
@@ -53,7 +53,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
>
`
: ""}
-
+ >
`
@@ -112,7 +112,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
.flex {
display: flex;
}
- ha-paper-slider {
+ ha-slider {
width: 100%;
margin-right: 16px;
}
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index ef49e80077..a620ec0204 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -2,7 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "./ha-icon";
-import "./ha-paper-slider";
+import "./ha-slider";
class HaLabeledSlider extends PolymerElement {
static get template() {
@@ -27,7 +27,7 @@ class HaLabeledSlider extends PolymerElement {
color: var(--secondary-text-color);
}
- ha-paper-slider {
+ ha-slider {
flex-grow: 1;
background-image: var(--ha-slider-background);
}
@@ -37,7 +37,7 @@ class HaLabeledSlider extends PolymerElement {
-
+ >
`;
}
diff --git a/src/components/ha-paper-slider.js b/src/components/ha-paper-slider.js
deleted file mode 100644
index 068a6d14c9..0000000000
--- a/src/components/ha-paper-slider.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import "@polymer/paper-slider/paper-slider";
-
-/**
- * @polymer
- * @customElement
- * @appliesMixin paper-slider
- */
-const PaperSliderClass = customElements.get("paper-slider");
-
-class HaPaperSlider extends PaperSliderClass {
- static get template() {
- const tpl = document.createElement("template");
- tpl.innerHTML = PaperSliderClass.template.innerHTML;
- const styleEl = document.createElement("style");
- styleEl.innerHTML = `
- .pin > .slider-knob > .slider-knob-inner {
- font-size: var(--ha-paper-slider-pin-font-size, 10px);
- line-height: normal;
- }
-
- .disabled.ring > .slider-knob > .slider-knob-inner {
- background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
- border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
- }
-
- .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.2em;
- height: 2.2em;
-
- -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.1em;
- width: 2.2em;
- height: 2.1em;
-
- -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);
- }
-
- :host([dir="rtl"]) .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;
- }
-
- .slider-input {
- width: 54px;
- }
- `;
- tpl.content.appendChild(styleEl);
- return tpl;
- }
-}
-customElements.define("ha-paper-slider", HaPaperSlider);
diff --git a/src/components/ha-slider.js b/src/components/ha-slider.js
index 386f9dd28a..9a2a9a09c9 100644
--- a/src/components/ha-slider.js
+++ b/src/components/ha-slider.js
@@ -17,6 +17,61 @@ class HaSlider extends PaperSliderClass {
-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, 10px);
+ line-height: normal;
+ }
+
+ .disabled.ring > .slider-knob > .slider-knob-inner {
+ background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
+ border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
+ }
+
+ .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.2em;
+ height: 2.2em;
+
+ -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.1em;
+ width: 2.2em;
+ height: 2.1em;
+
+ -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;
+ }
`)
);
}
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index e0436cea81..02d48e8a1b 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -16,7 +16,7 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-climate-control";
import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-paper-slider";
+import "../../../components/ha-slider";
import "../../../components/ha-switch";
import {
ClimateEntity,
@@ -148,7 +148,7 @@ class MoreInfoClimate extends LitElement {
${stateObj.attributes.humidity} %
-
-
+
`
@@ -451,7 +451,7 @@ class MoreInfoClimate extends LitElement {
cursor: pointer;
}
- ha-paper-slider {
+ ha-slider {
width: 100%;
}
diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts
index bfb4642a4a..94e69e68cf 100644
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@@ -15,7 +15,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-paper-slider";
+import "../../../components/ha-slider";
import "../../../components/ha-switch";
import {
HumidifierEntity,
@@ -54,7 +54,7 @@ class MoreInfoHumidifier extends LitElement {
${stateObj.attributes.humidity} %
-
-
+
@@ -187,7 +187,7 @@ class MoreInfoHumidifier extends LitElement {
cursor: pointer;
}
- ha-paper-slider {
+ ha-slider {
width: 100%;
}
diff --git a/src/dialogs/more-info/controls/more-info-water_heater.js b/src/dialogs/more-info/controls/more-info-water_heater.js
index 35345825ac..e17f264e67 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.js
+++ b/src/dialogs/more-info/controls/more-info-water_heater.js
@@ -9,7 +9,6 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import { featureClassNames } from "../../../common/entity/feature_class_names";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-paper-dropdown-menu";
-import "../../../components/ha-paper-slider";
import "../../../components/ha-switch";
import "../../../components/ha-water_heater-control";
import { EventsMixin } from "../../../mixins/events-mixin";
@@ -36,10 +35,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
cursor: pointer;
}
- ha-paper-slider {
- width: 100%;
- }
-
ha-water_heater-control.range-control-left,
ha-water_heater-control.range-control-right {
float: left;
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index efba1b5077..0c2c43124e 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -82,7 +82,7 @@ documentContainer.innerHTML = `
--light-primary-opacity: 1.0;
/* set our slider style */
- --ha-paper-slider-pin-font-size: 15px;
+ --ha-slider-pin-font-size: 15px;
/* rgb */
--rgb-primary-color: 3, 169, 244;