Ui template slider

Dashboard
1

Hello people, yet again I am stuck and have spent the last 5 hours trying to sort this out.

But maybe one of you just knows the answer (fingers crossed).

I am trying to dynamically populate a ui template with sliders to control some lights. The number of lights and their names will vary, so I can't hard code it. My code is as follows:-

<div_lights ng-repeat="(key, value) in msg.payload">
    <text id="light_name" >{{value.name}}</text> 
    
        
    <md-slider 
    id= "light_slider" aria-label="lights" min="0" max="100" step="1" ng-model="value.state" ng-change="send({payload: value.state, topic: value.name})">
    </md-slider>
    
</div_lights>

<style>
    div_lights{
        padding-top: 15px;
        width: 100%;
        text-align: center
    }
    
    #light_slider{
        width: 80%;
        margin: auto;
    }   
</style>

The sliders work fine and output the value as the payload and the name of the light as the topic.

The 2 problems I have are :-

1- I need to change the colour of the slider, which I thought I could do with-

.nr-dashboard-theme .nr-dashboard-slider .md-thumb:after {
    background-color: #097479;
    border-color: #097479

This will change the colour of a slider in the ui slider node, but not those in the ui template:(

and,

2- in a similar way if you change the value of a slider in a ui slider node this is sent to all browser sessions, but again not for those in the ui template.

I am absolutely lost now, so any help, suggestions, reading material would be very much appreciated.

Kind regards

Paul

2

What do you mean with dynamically populate?

I dont think a md-slider is a nr-dashboard-slider. Have you tried to change the color inside your #light_slider-class?

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.