Replace polymer paper-slider (#18168)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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

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

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

gallery/src/pages/components/ha-control-circular-slider.ts

@@ -49,11 +49,11 @@ export class DemoHaCircularSlider extends LitElement {
           <div class="field">
             <p>Current</p>
             <ha-slider
+              labeled
               min="10"
               max="30"
               .value=${this.current}
               @change=${this._currentChanged}
-              pin
             ></ha-slider>
             <p>${this.current} °C</p>
           </div>

gallery/src/pages/components/ha-hs-color-picker.ts

@@ -57,8 +57,8 @@ export class DemoHaHsColorPicker extends LitElement {
           ></ha-hs-color-picker>
           <p>Hue : ${this.value[0]}</p>
           <ha-slider
+            labeled
             step="1"
-            pin
             min="0"
             max="360"
             .value=${this.value[0]}
@@ -67,8 +67,8 @@ export class DemoHaHsColorPicker extends LitElement {
           </ha-slider>
           <p>Saturation : ${this.value[1]}</p>
           <ha-slider
+            labeled
             step="0.01"
-            pin
             min="0"
             max="1"
             .value=${this.value[1]}
@@ -77,8 +77,8 @@ export class DemoHaHsColorPicker extends LitElement {
           </ha-slider>
           <p>Color Brighness : ${this.brightness}</p>
           <ha-slider
+            labeled
             step="1"
-            pin
             min="0"
             max="255"
             .value=${this.brightness}

package.json

@@ -71,7 +71,6 @@
     "@material/mwc-radio": "0.27.0",
     "@material/mwc-ripple": "0.27.0",
     "@material/mwc-select": "0.27.0",
-    "@material/mwc-slider": "0.27.0",
     "@material/mwc-switch": "0.27.0",
     "@material/mwc-tab": "0.27.0",
     "@material/mwc-tab-bar": "0.27.0",
@@ -89,7 +88,6 @@
     "@polymer/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
-    "@polymer/paper-slider": "3.0.1",
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",

src/components/ha-form/ha-form-integer.ts

@@ -57,8 +57,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                 `
               : ""}
             <ha-slider
-              pin
+              labeled
-              ignore-bar-touch
               .value=${this._value}
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}

src/components/ha-labeled-slider.js

@@ -1,90 +0,0 @@
-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-slider";
-
-class HaLabeledSlider extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :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;
-        }
-      </style>
-
-      <div class="title">[[_getTitle()]]</div>
-      <div class="extra-container"><slot name="extra"></slot></div>
-      <div class="slider-container">
-        <ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
-        <ha-slider
-          min="[[min]]"
-          max="[[max]]"
-          step="[[step]]"
-          pin="[[pin]]"
-          disabled="[[disabled]]"
-          value="{{value}}"
-        ></ha-slider>
-      </div>
-      <template is="dom-if" if="[[helper]]">
-        <ha-input-helper-text>[[helper]]</ha-input-helper-text>
-      </template>
-    `;
-  }
-
-  _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);

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`
+      <div class="title">${this._getTitle()}</div>
+      <div class="extra-container"><slot name="extra"></slot></div>
+      <div class="slider-container">
+        ${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
+        <ha-slider
+          .min=${this.min}
+          .max=${this.max}
+          .step=${this.step}
+          labeled=${this.labeled}
+          .disabled=${this.disabled}
+          .value=${this.value}
+          @change=${this._inputChanged}
+        ></ha-slider>
+      </div>
+      ${this.helper
+        ? html`<ha-input-helper-text> ${this.helper} </ha-input-helper-text>`
+        : 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;
+  }
+}

src/components/ha-selector/ha-selector-color-temp.ts

@@ -24,7 +24,7 @@ export class HaColorTempSelector extends LitElement {
   protected render() {
     return html`
       <ha-labeled-slider
-        pin
+        labeled
         icon="hass:thermometer"
         .caption=${this.label || ""}
         .min=${this.selector.color_temp?.min_mireds ?? 153}
@@ -33,27 +33,25 @@ export class HaColorTempSelector extends LitElement {
         .disabled=${this.disabled}
         .helper=${this.helper}
         .required=${this.required}
-        @change=${this._valueChanged}
+        @value-changed=${this._valueChanged}
       ></ha-labeled-slider>
     `;
   }
 
   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(
+      --ha-slider-background: linear-gradient(
-        var(--float-end),
+        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);
     }
   `;
 }

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

@@ -48,6 +48,7 @@ export class HaNumberSelector extends LitElement {
                 ? html`${this.label}${this.required ? "*" : ""}`
                 : ""}
               <ha-slider
+                labeled
                 .min=${this.selector.number?.min}
                 .max=${this.selector.number?.max}
                 .value=${this.value ?? ""}
@@ -56,8 +57,6 @@ export class HaNumberSelector extends LitElement {
                   : this.selector.number?.step ?? 1}
                 .disabled=${this.disabled}
                 .required=${this.required}
-                pin
-                ignore-bar-touch
                 @change=${this._handleSliderChange}
               >
               </ha-slider>

src/components/ha-slider.js

@@ -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);

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;
+  }
+}

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -115,46 +115,50 @@ class LightRgbColorPicker extends LitElement {
       </div>
       ${supportsRgbw || supportsRgbww
         ? html`<ha-labeled-slider
+            labeled
             .caption=${this.hass.localize("ui.card.light.color_brightness")}
             icon="hass:brightness-7"
+            min="0"
             max="100"
             .value=${this._colorBrightnessSliderValue}
-            @change=${this._colorBrightnessSliderChanged}
+            @value-changed=${this._colorBrightnessSliderChanged}
-            pin
           ></ha-labeled-slider>`
         : nothing}
       ${supportsRgbw
         ? html`
             <ha-labeled-slider
+              labeled
               .caption=${this.hass.localize("ui.card.light.white_value")}
               icon="hass:file-word-box"
+              min="0"
               max="100"
               .name=${"wv"}
               .value=${this._wvSliderValue}
-              @change=${this._wvSliderChanged}
+              @value-changed=${this._wvSliderChanged}
-              pin
             ></ha-labeled-slider>
           `
         : nothing}
       ${supportsRgbww
         ? html`
             <ha-labeled-slider
+              labeled
               .caption=${this.hass.localize("ui.card.light.cold_white_value")}
               icon="hass:file-word-box-outline"
+              min="0"
               max="100"
               .name=${"cw"}
               .value=${this._cwSliderValue}
-              @change=${this._wvSliderChanged}
+              @value-changed=${this._wvSliderChanged}
-              pin
             ></ha-labeled-slider>
             <ha-labeled-slider
+              labeled
               .caption=${this.hass.localize("ui.card.light.warm_white_value")}
               icon="hass:file-word-box"
+              min="0"
               max="100"
               .name=${"ww"}
               .value=${this._wwSliderValue}
-              @change=${this._wvSliderChanged}
+              @value-changed=${this._wvSliderChanged}
-              pin
             ></ha-labeled-slider>
           `
         : 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)) {

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -128,9 +128,8 @@ class MoreInfoMediaPlayer extends LitElement {
               ${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
                 ? html`
                     <ha-slider
+                      labeled
                       id="input"
-                      pin
-                      ignore-bar-touch
                       .dir=${computeRTLDirection(this.hass!)}
                       .value=${Number(stateObj.attributes.volume_level) * 100}
                       @change=${this._selectedValueChanged}
@@ -283,8 +282,7 @@ class MoreInfoMediaPlayer extends LitElement {
   private _selectedValueChanged(e: Event): void {
     this.hass!.callService("media_player", "volume_set", {
       entity_id: this.stateObj!.entity_id,
-      volume_level:
+      volume_level: (e.target as any).value / 100,
-        Number((e.currentTarget! as HTMLElement).getAttribute("value")!) / 100,
     });
   }
 

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -85,15 +85,14 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
           ? html`
               <div class="flex">
                 <ha-slider
-                  .disabled=${isUnavailableState(stateObj.state)}
+                  labeled
                   .dir=${computeRTLDirection(this.hass)}
+                  .disabled=${isUnavailableState(stateObj.state)}
                   .step=${Number(stateObj.attributes.step)}
                   .min=${Number(stateObj.attributes.min)}
                   .max=${Number(stateObj.attributes.max)}
                   .value=${stateObj.state}
-                  pin
                   @change=${this._selectedValueChanged}
-                  ignore-bar-touch
                 ></ha-slider>
                 <span class="state">
                   ${this.hass.formatEntityState(stateObj)}

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`
                       <ha-slider
+                        labeled
                         .dir=${computeRTLDirection(this.hass!)}
                         .value=${Number(stateObj.attributes.volume_level) * 100}
-                        pin
                         @change=${this._selectedValueChanged}
-                        ignore-bar-touch
                         id="input"
                       ></ha-slider>
                     `

src/panels/lovelace/entity-rows/hui-number-entity-row.ts

@@ -89,15 +89,14 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
           ? html`
               <div class="flex">
                 <ha-slider
+                  labeled
                   .disabled=${stateObj.state === UNAVAILABLE}
                   .dir=${computeRTLDirection(this.hass)}
                   .step=${Number(stateObj.attributes.step)}
                   .min=${Number(stateObj.attributes.min)}
                   .max=${Number(stateObj.attributes.max)}
                   .value=${Number(stateObj.state)}
-                  pin
                   @change=${this._selectedValueChanged}
-                  ignore-bar-touch
                 ></ha-slider>
                 <span class="state">
                   ${this.hass.formatEntityState(stateObj)}

src/panels/media-browser/ha-bar-media-player.ts

@@ -293,6 +293,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                   .path=${mdiVolumeHigh}
                 ></ha-icon-button>
                 <ha-slider
+                  labeled
                   min="0"
                   max="100"
                   step="1"

src/resources/ha-style.ts

@@ -47,7 +47,7 @@ documentContainer.innerHTML = `<custom-style>
       --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 = `<custom-style>
         line-height: 20px;
       };
 
+      direction: ltr;
+      --direction: ltr;
+      --float-start: left;
+      --float-end: right;
+
       ${Object.entries(derivedStyles)
         .map(([key, value]) => `--${key}: ${value};`)
         .join("")}

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)",
 

src/state-summary/state-card-input_number.ts

@@ -57,15 +57,14 @@ class StateCardInputNumber extends LitElement {
         ? html`
             <div class="flex">
               <ha-slider
-                .disabled=${isUnavailableState(this.stateObj.state)}
+                labeled
                 .dir=${computeRTLDirection(this.hass)}
+                .disabled=${isUnavailableState(this.stateObj.state)}
                 .step=${Number(this.stateObj.attributes.step)}
                 .min=${Number(this.stateObj.attributes.min)}
                 .max=${Number(this.stateObj.attributes.max)}
                 .value=${this.stateObj.state}
-                pin
                 @change=${this._selectedValueChanged}
-                ignore-bar-touch
               ></ha-slider>
               <span class="state">
                 ${this.hass.formatEntityState(this.stateObj)}

src/state-summary/state-card-number.js

@@ -18,6 +18,7 @@ class StateCardNumber extends mixinBehaviors(
       <style>
         ha-slider {
           margin-left: auto;
+          flex-grow: 1;
         }
         .state {
           @apply --paper-font-body1;
@@ -42,16 +43,15 @@ class StateCardNumber extends mixinBehaviors(
       <div class="horizontal justified layout" id="number_card">
         ${this.stateInfoTemplate}
         <ha-slider
+          labeled
           min="[[min]]"
           max="[[max]]"
           value="{{value}}"
           step="[[step]]"
           hidden="[[hiddenslider]]"
-          pin
           on-change="selectedValueChanged"
           on-click="stopPropagation"
           id="slider"
-          ignore-bar-touch=""
         >
         </ha-slider>
         <ha-textfield
@@ -183,12 +183,12 @@ class StateCardNumber extends mixinBehaviors(
     this.value = ev.target.value;
   }
 
-  selectedValueChanged() {
+  selectedValueChanged(ev) {
-    if (this.value === Number(this.stateObj.state)) {
+    if (ev.target.value === Number(this.stateObj.state)) {
       return;
     }
     this.hass.callService("number", "set_value", {
-      value: this.value,
+      value: ev.target.value,
       entity_id: this.stateObj.entity_id,
     });
   }

yarn.lock

@@ -2748,20 +2748,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/mwc-slider@npm:0.27.0":
-  version: 0.27.0
-  resolution: "@material/mwc-slider@npm:0.27.0"
-  dependencies:
-    "@material/dom": =14.0.0-canary.53b3cad2f.0
-    "@material/mwc-base": ^0.27.0
-    "@material/mwc-ripple": ^0.27.0
-    "@material/slider": =14.0.0-canary.53b3cad2f.0
-    lit: ^2.0.0
-    tslib: ^2.0.1
-  checksum: 0e7f9d0d418731fb9ba1ffe99cc88e79a4116e92d048476dc24fa87688f13335945fcdc9fef6d6f699e0c6b16fea5ed7527f71193bcf1365177e7ba7a865b140
-  languageName: node
-  linkType: hard
-
 "@material/mwc-switch@npm:0.27.0":
   version: 0.27.0
   resolution: "@material/mwc-switch@npm:0.27.0"
@@ -2988,24 +2974,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@material/slider@npm:=14.0.0-canary.53b3cad2f.0":
-  version: 14.0.0-canary.53b3cad2f.0
-  resolution: "@material/slider@npm:14.0.0-canary.53b3cad2f.0"
-  dependencies:
-    "@material/animation": 14.0.0-canary.53b3cad2f.0
-    "@material/base": 14.0.0-canary.53b3cad2f.0
-    "@material/dom": 14.0.0-canary.53b3cad2f.0
-    "@material/elevation": 14.0.0-canary.53b3cad2f.0
-    "@material/feature-targeting": 14.0.0-canary.53b3cad2f.0
-    "@material/ripple": 14.0.0-canary.53b3cad2f.0
-    "@material/rtl": 14.0.0-canary.53b3cad2f.0
-    "@material/theme": 14.0.0-canary.53b3cad2f.0
-    "@material/typography": 14.0.0-canary.53b3cad2f.0
-    tslib: ^2.1.0
-  checksum: 136d6c6f77e4fa586ac375b5a108be06a394f0c55fbb10e73eaa990cd6cb38d2787e278911705571b5336402690e0b88b5fe9de9916704db948247a6b6b0c1fb
-  languageName: node
-  linkType: hard
-
 "@material/switch@npm:=14.0.0-canary.53b3cad2f.0":
   version: 14.0.0-canary.53b3cad2f.0
   resolution: "@material/switch@npm:14.0.0-canary.53b3cad2f.0"
@@ -3600,15 +3568,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/iron-range-behavior@npm:^3.0.0-pre.26":
-  version: 3.0.1
-  resolution: "@polymer/iron-range-behavior@npm:3.0.1"
-  dependencies:
-    "@polymer/polymer": ^3.0.0
-  checksum: da2405650bccc2071bebfd30f379e92d930bd95d306e2626da9d92a07b849f0e5cdc08430bfb03a6ae8f5644ab9364ff64252892da1b1ddc01d2f5f1f026e808
-  languageName: node
-  linkType: hard
-
 "@polymer/iron-resizable-behavior@npm:3.0.1, @polymer/iron-resizable-behavior@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/iron-resizable-behavior@npm:3.0.1"
@@ -3661,7 +3620,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-input@npm:3.2.1, @polymer/paper-input@npm:^3.0.0-pre.26":
+"@polymer/paper-input@npm:3.2.1":
   version: 3.2.1
   resolution: "@polymer/paper-input@npm:3.2.1"
   dependencies:
@@ -3700,18 +3659,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-progress@npm:^3.0.0-pre.26":
-  version: 3.0.1
-  resolution: "@polymer/paper-progress@npm:3.0.1"
-  dependencies:
-    "@polymer/iron-flex-layout": ^3.0.0-pre.26
-    "@polymer/iron-range-behavior": ^3.0.0-pre.26
-    "@polymer/paper-styles": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: 5ae0ce84d05ed777c40c27c82559cedc44f1b4ed523a675932cce4a4d6a82f772ee414b21c67db528ea316686c1ed84b53e1850bbb3a6f5c3964339e2c20289b
-  languageName: node
-  linkType: hard
-
 "@polymer/paper-ripple@npm:^3.0.0-pre.26":
   version: 3.0.2
   resolution: "@polymer/paper-ripple@npm:3.0.2"
@@ -3722,23 +3669,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polymer/paper-slider@npm:3.0.1":
-  version: 3.0.1
-  resolution: "@polymer/paper-slider@npm:3.0.1"
-  dependencies:
-    "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
-    "@polymer/iron-behaviors": ^3.0.0-pre.26
-    "@polymer/iron-flex-layout": ^3.0.0-pre.26
-    "@polymer/iron-form-element-behavior": ^3.0.0-pre.26
-    "@polymer/paper-behaviors": ^3.0.0-pre.27
-    "@polymer/paper-input": ^3.0.0-pre.26
-    "@polymer/paper-progress": ^3.0.0-pre.26
-    "@polymer/paper-styles": ^3.0.0-pre.26
-    "@polymer/polymer": ^3.0.0
-  checksum: ab915606df8150f77ad9e03c845ce5f600882cd7c0b3bb6a6ea77816ee1b40d01d5b3f72f0d8df6ce5e46fa9f0335d3930c8cc46a23cf8d8dfdbc0aeb9c181a4
-  languageName: node
-  linkType: hard
-
 "@polymer/paper-styles@npm:^3.0.0-pre.26":
   version: 3.0.1
   resolution: "@polymer/paper-styles@npm:3.0.1"
@@ -9690,7 +9620,6 @@ __metadata:
     "@material/mwc-radio": 0.27.0
     "@material/mwc-ripple": 0.27.0
     "@material/mwc-select": 0.27.0
-    "@material/mwc-slider": 0.27.0
     "@material/mwc-switch": 0.27.0
     "@material/mwc-tab": 0.27.0
     "@material/mwc-tab-bar": 0.27.0
@@ -9712,7 +9641,6 @@ __metadata:
     "@polymer/paper-input": 3.2.1
     "@polymer/paper-item": 3.0.1
     "@polymer/paper-listbox": 3.0.1
-    "@polymer/paper-slider": 3.0.1
     "@polymer/paper-tabs": 3.1.0
     "@polymer/paper-toast": 3.0.1
     "@polymer/polymer": 3.5.1