Replace polymer paper-slider (#18168)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
2025-07-24 09:46:36 +00:00 · 2023-10-16 13:35:13 +02:00 · 2023-10-16 13:35:13 +02:00 · 62d21bea4f
commit 62d21bea4f
parent 434b9595c0
24 changed files with 169 additions and 358 deletions
--- 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",
--- 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",
--- 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",
--- 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 {
          <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>
--- 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 {
          ></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}
--- a/package.json
+++ b/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",
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@ -57,8 +57,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                `
              : ""}
            <ha-slider
-              pin
-              ignore-bar-touch
+              labeled
              .value=${this._value}
              .min=${this.schema.valueMin}
              .max=${this.schema.valueMax}
--- a/src/components/ha-labeled-slider.js
+++ b/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);
--- a/src/components/ha-labeled-slider.ts
+++ 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`
+      <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;
+  }
+}
--- 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`
      <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(
-        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);
    }
  `;
 }
--- 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 ? "*" : ""}`
                : ""}
              <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>
--- a/src/components/ha-slider.js
+++ b/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);
--- a/src/components/ha-slider.ts
+++ 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;
+  }
+}
--- 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 {
      </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}
-            pin
+            @value-changed=${this._colorBrightnessSliderChanged}
          ></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}
-              pin
+              @value-changed=${this._wvSliderChanged}
            ></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}
-              pin
+              @value-changed=${this._wvSliderChanged}
            ></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}
-              pin
+              @value-changed=${this._wvSliderChanged}
            ></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)) {
--- 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`
                    <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:
-        Number((e.currentTarget! as HTMLElement).getAttribute("value")!) / 100,
+      volume_level: (e.target as any).value / 100,
    });
  }

--- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
+++ b/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)}
--- 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`
                      <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>
                    `
--- 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`
              <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)}
--- 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}
                ></ha-icon-button>
                <ha-slider
+                  labeled
                  min="0"
                  max="100"
                  step="1"
--- a/src/resources/ha-style.ts
+++ b/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("")}
--- 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)",

--- 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`
            <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)}
--- a/src/state-summary/state-card-number.js
+++ b/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() {
-    if (this.value === Number(this.stateObj.state)) {
+  selectedValueChanged(ev) {
+    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,
    });
  }
--- a/yarn.lock
+++ b/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