add slider support for array attributes, and fix template and VALUE a…

…nd HOLD_SECS interpolation in service call data arrays

README.md

@@ -729,7 +729,7 @@ You can change several other attributes of the slider by setting them in a custo
 | step            | number           | The step size of the slider, defaults to one hundredth of the range.                                |
 | tooltip         | boolean          | Whether or not to display a tooltip with the slider value when it's held down on, defaults to true. |
 
-You can change the entity attribute that the slider tracks by setting `value_attribute` to either `state` or an entity specific attribute.
+You can change the entity attribute that the slider tracks by setting `value_attribute` to either `state` or an entity specific attribute. If the attribute which you wish to use is an array, you can also further include the index at the end of the attribute name in brackets (like `hs_color[0]`).
 
 ```yaml
 custom_actions:

src/classes/base-remote-element.ts

@@ -150,25 +150,15 @@ export class BaseRemoteElement extends LitElement {
 			HOLD_SECS: holdSecs ?? 0,
 		};
 		for (const key in data) {
-			data[key] = renderTemplate(this.hass, data[key] as string, context);
-			if (data[key]) {
-				if (data[key] == 'VALUE') {
-					data[key] = this.value;
-				} else if (data[key].toString().includes('VALUE')) {
-					data[key] = data[key]
-						.toString()
-						.replace(/VALUE/g, (this.value ?? '').toString());
-				}
-
-				if (holdSecs) {
-					if (data[key] == 'HOLD_SECS') {
-						data[key] = holdSecs;
-					} else if (data[key].toString().includes('HOLD_SECS')) {
-						data[key] = data[key]
-							.toString()
-							.replace(/HOLD_SECS/g, (holdSecs ?? '').toString());
-					}
+			if (Array.isArray(data[key])) {
+				for (const i in data[key] as string[]) {
+					(data[key] as string[])[i] = this.replaceValue(
+						(data[key] as string[])[i],
+						context,
+					) as string;
 				}
+			} else {
+				data[key] = this.replaceValue(data[key] as string, context);
 			}
 		}
 		this.hass.callService(domain, service, data);
@@ -335,6 +325,37 @@ export class BaseRemoteElement extends LitElement {
 		return true;
 	}
 
+	replaceValue(
+		str: string | number | boolean,
+		context: object,
+	): string | number | boolean {
+		str = renderTemplate(this.hass, str as string, context);
+
+		if (str) {
+			if (str == 'VALUE') {
+				str = this.value;
+			} else if (str.toString().includes('VALUE')) {
+				str = str
+					.toString()
+					.replace(/VALUE/g, (this.value ?? '').toString());
+			}
+			if ('HOLD_SECS' in context) {
+				if (str == 'HOLD_SECS') {
+					str = context.HOLD_SECS as string;
+				} else if (str.toString().includes('HOLD_SECS')) {
+					str = str
+						.toString()
+						.replace(
+							/HOLD_SECS/g,
+							(context.HOLD_SECS ?? '').toString(),
+						);
+				}
+			}
+		}
+
+		return str;
+	}
+
 	// Skeletons for overridden event handlers
 	onStart(_e: MouseEvent | TouchEvent) {}
 	onEnd(_e: MouseEvent | TouchEvent) {}

src/classes/remote-slider.ts

@@ -186,16 +186,41 @@ export class RemoteSlider extends BaseRemoteElement {
 				this.hass,
 				(this.actions.tap_action?.data?.entity_id as string) ?? '',
 			) as string;
-			const valueAttribute = renderTemplate(
+			let valueAttribute = renderTemplate(
 				this.hass,
 				this.actions.value_attribute as string,
 			) as string;
 			if (valueAttribute) {
 				if (valueAttribute.toLowerCase() == 'state') {
 					this.value = parseFloat(this.hass.states[entityId].state);
 				} else {
-					let value =
-						this.hass.states[entityId].attributes[valueAttribute];
+					let value;
+					const indexMatch = valueAttribute.match(/\[\d+\]$/);
+
+					if (indexMatch) {
+						const index = parseInt(
+							indexMatch[0].replace(/\[|\]/g, ''),
+						);
+						valueAttribute = valueAttribute.replace(
+							indexMatch[0],
+							'',
+						);
+						value =
+							this.hass.states[entityId].attributes[
+								valueAttribute
+							];
+						if (value && value.length) {
+							value = value[index];
+						} else {
+							value == undefined;
+						}
+					} else {
+						value =
+							this.hass.states[entityId].attributes[
+								valueAttribute
+							];
+					}
+
 					if (valueAttribute.toLowerCase() == 'brightness') {
 						value = Math.round((100 * parseInt(value ?? 0)) / 255);
 					}