Add ability for slider to track template value and template service data

Is your feature request related to a problem? Please describe.
This does not seem to be an actual bug as I do not see any examples doing exactly this in the readme.

Describe the solution you'd like
I am trying to reproduce the functionality of the mushroom light card for adding a RGB slider to allow picking a light color. Looking at the mushroom card code it seems that this is achieved by calling the light.turn_on service with an hs_color value, which while usually taking two numbers (hue and saturation), hard code the saturation to 100 and allow the slider bar to set the hue.

Describe alternatives you've considered
The following is what I have tried but does not work:

type: custom:service-call
entries:
  - type: slider
    thumb: line
    range:
      - 0
      - 360
    step: 0.1
    service: light.turn_on
    value_attribute: >-
      {{
      state_attr('light.my_light_entity',
      'hs_color')[0] }}  /// this does not work which seems to be part of the issue
    label: >-
      {{
      state_attr('light.my_light_entity',
      'hs_color')[0] }}  /// this does however render correctly in the label field
    data:
      hs_color: '{{ (VALUE|float, 100)|list }}' /// this does not seem to work and the value is not set
      entity_id: light.my_light_entity
    style:
      '--gradient': >-
        -webkit-linear-gradient(left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
        #00f 66%, #f0f 83%, #f00 100%)
      background-image: var(--gradient)

additionally trying to set the hs_color as follows also does not work:

hs_color:
  - VALUE // replacing this with {{ VALUE }} has no change
  - 100

As a very hacky workaround the following DOES work:
I created a script with the following:

sequence:
  - service: light.turn_on
    data_template:
      hs_color: "{{ (target_hue|float, 100)|list }}"
    target:
      entity_id: ....
mode: single

which the dashboard configured as followed:

type: custom:service-call
entries:
  - type: slider
    thumb: line
    range:
      - 0
      - 360
    step: 0.1
    service: script.light_setting_script
    data:
      target_hue: VALUE
    style:
      '--gradient': >-
        -webkit-linear-gradient(left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
        #00f 66%, #f0f 83%, #f00 100%)
      background-image: var(--gradient)

In the above example moving the slider bar does change the color to the expected color but I am assuming because the value_attribute does not support a template the slider simply jumps back to its original position (the label value is however correctly represented).

Additional context
example of what the mushroom card looks like:

closest I've come with using service-call:

it seems setting value_attribute to

value_attribute: VALUE[0]

does track the attribute as expected but the service_call portion is still not passing the value

I hadn't accounted for array type attributes to be used with the slider and will have to enhance it to do so. I may have to add a new field for attributes that are arrays. Also, value_attribute should just be the attribute name hs_color, but I'll have to add additional logic to also include the attribute index.

I hadn't accounted for array type attributes to be used with the slider and will have to enhance it to do so. I may have to add a new field for attributes that are arrays. Also, value_attribute should just be the attribute name hs_color, but I'll have to add additional logic to also include the attribute index.

@Nerwyn, thank you for the quick reply. What you said makes sense, it is a pretty niche use case but it would definitely make the service-call feature a full replacement of my current front end for most cases. Just wanted to also say, awesome stuff thus far can't believe I only recently came across this project.

Outside of the value_attribute, do you think you will also need to make changes to how the callService function renders the "VALUE"? I am looking at

service-call-tile-feature/src/classes/base-service-call-feature.ts

Line 71 in 03c16a7

callService(action: IAction) {

and it seems that its potentially does not account for VALUE to be in an array of data[key]?

Let me know if there is anything I can do to test or help out.

I just pushed an alpha version which fixes service call data VALUE setting in arrays like hs_color. I still have to fix value_attribute though.

Here's the diff from the first alpha. I moved the code for parsing templates and replacing VALUE into a separate function, and called it either in a loop for arrays or directly on the data key value.

I don't expect us to see more complicated data objects with further nested arrays or objects so I don't think we have to account for them. I did write something that would account for them using deep keys and lodash at a previous job and could possibly recreate it, but it would be overkill.

Also the work you've done on the color slider config is excellent! I plan on adding it to the README examples.

@irakhlin I've released a beta that should allow for attributes that are arrays to be used as value_attribute and also fixes template processing and VALUE setting for service call data. Try downloading the latest beta and this config (with your light entity ID):

type: custom:service-call
entries:
  - type: slider
    thumb: line
    range:
      - 0
      - 360
    step: 0.1
    service: light.turn_on
    value_attribute: hs_color[0]
    label: VALUE
    data:
      hs_color:
        - VALUE
        - 100
      entity_id: light.sunroom_ceiling
    style:
      flex-basis: 200%
      '--background': >-
        linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f
        66%, #f0f 83%, #f00 100%)
      '--background-opacity': 1

@Nerwyn awesome stuff, seems to work for me!

This seems to be working fine for both of us, so I'm going to release it.

Fixed/added in 3.2.2