How to create slider in dashboard template

Any idea what I'm doing wrong here?

I am trying to create a lighting automation, by storing values for individual light fixings (as well as scenes / presets for multiple fixtures) in an object in context memory. The object looks like this:

I have created a dashboard template that enumerates the light fixtures shown above (ceiling, wall, bedside, etc.) and it creates a label and slider for each fixture (and shows its value underneath, for testing)

<div ng-repeat="(key, value) in msg.payload">
    <p>{{value.name}}</p>
    <md-slider min="0" max="100" step="5" ng-model="value.state" ng-change="send(msg)"></md-slider>
{{value.state}}
</div>

This creates the slider fine, and the testing value shows 50, which is the correct value set in context memory. However the initial slider value is set to zero, despite {{value.state}} being 50. (Sorry, my screenshot above shows 80, just ignore that.)

If I change the ng-model parameter to add curly brackets {{ }} it stops the slider moving (and doesn't set the initial value to correct amount).

  1. How do I fix this so the slider reflects the correct value in memory, when data is sent to the dashboard template? i.e. at startup

  2. Every time I update the slider, because I'm sending the whole msg object, it will store back ALL of the light fixtures and their metadata. Obviously I don't want this. I just want to send back the actual value that was changed. This would require the template node to send out TWO pieces of data: the name or ID of the fitting, and its value. I have fiddled with ng-change, for example ng-change="send(value.name, value.state)" but that just sends the first item out (the name), not both. How can I do this?

Any other suggestions for how I'm doing this (i.e. "you're doing it all wrong!") will be received with great interest!

Cheers, and happy holidays :slight_smile: