Implement inverted slider

README.md

@@ -56,6 +56,7 @@ Available options:
 | `attribute`     | (see below)    | Which attribute the slider should control                                                                                                 |          |
 | `colorize`      | `true`/`false` | Colorize the bar (only for some attributes)                                                                                               | `false`  |
 | `dir`           | `ltr`/`rtl`    | Use this to override your languages Right-To-Left or Left-To-Right setting                                                                | language |
+| `inverted`      | `true`/`false` | Inverts slider percentage for a more natural cover slider from closed to open                                                             | `false`  |
 
 Most general Entities row options like `name`, `icon` and `tap_action` et.al. are also supported.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "slider-entity-row",
   "private": true,
-  "version": "17.4.0",
+  "version": "17.4.1",
   "type": "module",
   "description": "slider-entity-row =================",
   "scripts": {

src/controllers/controller.ts

@@ -14,6 +14,7 @@ export interface ControllerConfig {
   dir?: string;
   colorize?: boolean;
   show_icon?: boolean;
+  inverted?: boolean;
 }
 
 export abstract class Controller {

src/main.ts

@@ -96,8 +96,19 @@ class SliderEntityRow extends LitElement {
       ? false
       : true;
 
+    const formatValue = () =>
+      this._config.inverted
+        ? (() => {
+            let matches = /[0-9]{2}/.exec(c.string) || [];
+            if (!matches.length) {
+              return c.string;
+            }
+            return c.string.replace(matches[0], (100 - c.value).toString());
+          })()
+        : c.string;
+
     const content = html`
-      <div class="wrapper" @click=${(ev) => ev.stopPropagation()}>
+      <div class="wrapper" @click=${(ev: Event) => ev.stopPropagation()}>
         ${showSlider
           ? html`
               ${this._config.colorize && c.background
@@ -116,14 +127,16 @@ class SliderEntityRow extends LitElement {
                 .min=${c.min}
                 .max=${c.max}
                 .step=${c.step}
-                .value=${c.value}
+                .value=${this._config?.inverted ? 100 - c.value : c.value}
                 .dir=${dir}
                 labeled
                 pin
-                @change=${(ev) =>
-                  (c.value = (
+                @change=${(ev: Event) => {
+                  const target = (
                     this.shadowRoot.querySelector("ha-slider") as any
-                  ).value)}
+                    ).value;
+                    c.value = this._config.inverted ? 100 - target : target;
+                  }}
                 class=${this._config.full_row || this._config.grow
                   ? "full"
                   : ""}
@@ -136,7 +149,7 @@ class SliderEntityRow extends LitElement {
           ? html`<span class="state">
               ${c.stateObj.state === "unavailable"
                 ? this.hass.localize("state.default.unavailable")
-                : c.string}
+                : formatValue()}
             </span>`
           : ""}
       </div>

test/views/1_types.yaml

@@ -46,6 +46,7 @@ cards:
           - type: custom:slider-entity-row
             entity: cover.hall_window
             name: cover
+            inverted: true
           - type: custom:slider-entity-row
             entity: fan.ceiling_fan
             name: fan