# Ui template slider

**URL:** <https://discourse.nodered.org/t/ui-template-slider/68315>\
**Category:** Dashboard\
**Created:** [27 September 2022 16:56 UTC](https://discourse.nodered.org/t/ui-template-slider/68315 "2022-09-27T16:56:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulalsmith1000](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@paulalsmith1000](https://discourse.nodered.org/u/paulalsmith1000)\
**Post date:** [27 September 2022 16:56 UTC](https://discourse.nodered.org/t/ui-template-slider/68315/1 "2022-09-27T16:56:41Z")

</div>

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:-

```auto
<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-

```auto
.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

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [28 September 2022 11:30 UTC](https://discourse.nodered.org/t/ui-template-slider/68315/2 "2022-09-28T11:30:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 October 2022 11:31 UTC](https://discourse.nodered.org/t/ui-template-slider/68315/3 "2022-10-28T11:31:10Z")

</div>

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