Add support for script domain

src/controllers/automation-controller.ts

@@ -6,6 +6,10 @@ export class AutomationController extends Controller {
   _max = 1;
   _targetValue;
   _invert = false;
+  _clickPosition;
+  _clickPositionLock;
+  _originalValue;
+  _originalValueLock;
 
   get _value(): number {
     return !STATES_OFF.includes(this.stateObj.state)

src/controllers/controller.ts

@@ -147,6 +147,13 @@ export abstract class Controller {
     return `${this.targetValue}`;
   }
 
+  get attributeLabel(): string {
+    if (this._config.attribute) {
+      return this.stateObj.attributes[this._config.attribute];
+    }
+    return '';
+  }
+
   get hidden(): boolean {
     return false;
   }

src/editor.ts

@@ -62,6 +62,10 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
     return typeof this._config?.show_state === 'undefined' ? true : this._config?.show_state;
   }
 
+  get _show_attribute(): boolean {
+    return typeof this._config?.show_attribute === 'undefined' ? true : this._config?.show_attribute;
+  }
+
   get _compact(): boolean {
     return typeof this._config?.compact !== 'boolean' ? false : this._config?.compact;
   }
@@ -70,6 +74,10 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
     return this._config?.entity || '';
   }
 
+  get _attribute(): string {
+    return this._config?.attribute || '';
+  }
+
   get _icon(): IconConfig {
     return this._config?.icon || IconConfigDefault;
   }
@@ -112,6 +120,13 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
                 .configValue=${'name'}
                 @value-changed=${this._valueChanged}
               ></paper-input>
+              <paper-input
+                label="${localize('tabs.general.attribute')}"
+                .value=${this._attribute}
+                .placeholder=""
+                .configValue=${'attribute'}
+                @value-changed=${this._valueChanged}
+              ></paper-input>
               <div class="side-by-side">
                 <ha-formfield .label=${localize('tabs.general.show_name')}>
                   <ha-switch
@@ -127,6 +142,13 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
                     @change=${this._valueChanged}
                   ></ha-switch>
                 </ha-formfield>
+                <ha-formfield .label=${localize('tabs.general.show_attribute')}>
+                  <ha-switch
+                    .checked=${this._show_attribute}
+                    .configValue=${'show_attribute'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
                 <ha-formfield .label=${localize('tabs.general.compact')}>
                   <ha-switch
                     .checked=${this._compact}

src/localize/languages/en.json

@@ -9,9 +9,11 @@
     "general": {
       "title": "General",
       "entity": "Entity (Required)",
+      "attribute": "Attribute (Optional)",
       "name": "Name (Optional)",
       "show_name": "Show name?",
       "show_state": "Show state?",
+      "show_attribute": "Show attribute?",
       "compact": "Compact?"
     },
     "icon": {

src/slider-button-card.ts

@@ -180,7 +180,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
   }
 
   private renderText(): TemplateResult {
-    if (!this.config.show_name && !this.config.show_state) {
+    if (!this.config.show_name && !this.config.show_state && !this.config.show_attribute) {
       return html``;
     }
     return html`
@@ -189,17 +189,29 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
               ? html`
                 <div class="name">${this.ctrl.name}</div>
                 `
-                : ''}
-            ${this.config.show_state
-              ? html`
-                <div class="state">
-                  ${this.ctrl.isUnavailable
-                  ? html`
-                    ${this.hass.localize('state.default.unavailable')}
-                    ` : html`
-                    ${this.ctrl.label}
-                  `}
-                </div>
+              : ''}
+
+              ${this.config.show_state
+                ? html`
+                  <span class="state">
+                    ${this.ctrl.isUnavailable
+                    ? html`
+                      ${this.hass.localize('state.default.unavailable')}
+                      ` : html`
+                      ${this.ctrl.label}
+                    `}
+                  </span>
+                  `
+                  : ''}
+
+              ${this.config.show_attribute
+                ? html`
+                  <span class="attribute">
+                  ${this.config.show_state && this.ctrl.attributeLabel
+                    ? html `  ·  `
+                    : ''}
+                ${this.ctrl.attributeLabel}
+                  </span>
                 `
                 : ''}
           </div>
@@ -615,6 +627,15 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       overflow: hidden;
     }
 
+    /* --- ATTRIBUTE --- */
+
+    .attribute {      
+      color: var(--state-color-on, var(--label-badge-text-color, white));      
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-shadow: var(--state-text-shadow);
+      transition: font-size 0.1s ease-in-out;
+    }
 
     /* --- SLIDER --- */    
 

src/types.ts

@@ -11,9 +11,11 @@ declare global {
 export interface SliderButtonCardConfig extends LovelaceCardConfig {
   type: string;
   entity: string;
+  attribute?: string;
   name?: string;
   show_name?: boolean;
   show_state?: boolean;
+  show_attribute?: boolean;
   icon?: IconConfig;
   action_button?: ActionButtonConfig;
   slider?: SliderConfig;
@@ -120,6 +122,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
     show_track: false,
     toggle_on_click: false,
     force_square: false,
+    show_attribute: false,
   }],
   [Domain.FAN, {
     direction: SliderDirections.LEFT_RIGHT,
@@ -129,6 +132,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
     show_track: false,
     toggle_on_click: false,
     force_square: false,
+    show_attribute: false,
   }],
   [Domain.SWITCH, {
     direction: SliderDirections.LEFT_RIGHT,
@@ -138,6 +142,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
     show_track: false,
     toggle_on_click: true,
     force_square: false,
+    show_attribute: false,
   }],
   [Domain.AUTOMATION, {
     direction: SliderDirections.LEFT_RIGHT,
@@ -157,6 +162,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
     show_track: false,
     force_square: false,
     invert: true,
+    show_attribute: false,
   }],
   [Domain.INPUT_BOOLEAN, {
     direction: SliderDirections.LEFT_RIGHT,
@@ -166,6 +172,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
     show_track: false,
     toggle_on_click: true,
     force_square: false,
+    show_attribute: false,
   }],
   [Domain.MEDIA_PLAYER, {
     direction: SliderDirections.LEFT_RIGHT,
@@ -175,6 +182,8 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
     show_track: true,
     toggle_on_click: false,
     force_square: false,
+    show_attribute: true,
+    attribute: "media_title",
   }],
   [Domain.LOCK, {
     direction: SliderDirections.LEFT_RIGHT,
@@ -184,6 +193,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
     show_track: false,
     toggle_on_click: true,
     force_square: false,
+    show_attribute: false,
   }],
   [Domain.CLIMATE, {
     direction: SliderDirections.LEFT_RIGHT,
@@ -193,6 +203,7 @@ export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([
     show_track: true,
     toggle_on_click: false,
     force_square: false,
+    show_attribute: false,
   }],
 ]);