Reverse slider display

Feature Requests
13

It seems that the PR will not be accepted, but I found a good way to do it.
I have created a custom feature for the cover, looking at this sample: Custom card feature | Home Assistant Developer Docs
Here is my code:

import { LitElement, html, css } from "https://unpkg.com/lit-element@2/lit-element.js?module";

const supportsCoverPositionNotInvertedFeature = (stateObj) => {
  const domain = stateObj.entity_id.split(".")[0];
  return domain === "cover";
};

class CoverPositionInvertedCardFeature extends LitElement {
  static get properties() {
    return {
      hass: undefined,
      config: undefined,
      stateObj: undefined,
    };
  }

  static getStubConfig() {
    return {
      type: "custom:cover-position-not-inverted",
    };
  }

  setConfig(config) {
    this.config = config;
  }

  _setPosition(ev) {
    ev.stopPropagation();
    const value = ev.detail?.value;
    if (isNaN(value)) return;

    this.hass.callService("cover", "set_cover_position", {
      entity_id: this.stateObj.entity_id,
      position: value,
    });
  }

  render() {
    if (
      !this.config ||
      !this.hass ||
      !this.stateObj ||
      !supportsCoverPositionNotInvertedFeature(this.stateObj)
    ) {
      return null;
    }

    const UNAVAILABLE = "unavailable";
    const stateActive =
      this.stateObj.state !== UNAVAILABLE &&
      this.stateObj.state !== "off";

    const percentage = stateActive
      ? this.stateObj.attributes.current_position ?? 0
      : 0;

    const value = Math.max(Math.round(percentage), 0);

    // TODO the real Home Assistant feature uses dynamic calculation of the styles. Now this is a fixed style. Try to emulate the real behaviour here in a future.
    const color = "var(--state-cover-blind-open-color, var(--state-cover-open-color, var(--state-cover-active-color, var(--state-active-color))));";    

    const style = {
      "--control-slider-color": color,
      "--control-slider-background": color,
    };

    return html`
      <ha-control-slider
        style="${Object.entries(style).map(([k, v]) => `${k}: ${v}`).join('; ')}"
        .value=${value}
        min="0"
        max="100"
        step="1"        
        show-handle
        @value-changed=${this._setPosition}
        .label=${"Position"}
        .disabled=${this.stateObj.state === UNAVAILABLE}
        .unit=${"%"}
        .locale=${this.hass.locale}
      ></ha-control-slider>
    `;
  }
}

customElements.define(
  "cover-position-not-inverted",
  CoverPositionInvertedCardFeature
);

window.customCardFeatures = window.customCardFeatures || [];
window.customCardFeatures.push({
  type: "cover-position-not-inverted",
  name: "Cover position (not inverted)",
  supported: supportsCoverPositionNotInvertedFeature,
  configurable: false,
});

Only need to copy this to config/www folder with the name custom-feature-cover-position-not-inverted.js, and add, in the config of Home Assistant, Dashboards, the URL: /local/custom-feature-cover-position-not-inverted.js.
Then you will see it in the tile card as a feature.