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:

Resolved, in case anyone searches this later:

<div ng-repeat="(key, value) in msg.fixturesettings">
    <div style="display:inline;width:20%">{{value.label}}</div>
    <div style="float:right;width:80%"><md-slider min="0" max="100" step="{{value.resolution}}" ng-model="value.setting.brightness" ng-change="send({action: 'bri', topic: key, brightness: value.setting.brightness})"></md-slider></div>

Thanks for sharing
I'm doing something very similar been playing around with layout and styling of slider

<div>
    <div>LC3 Under Cabinet Lights</div>
    <div class="sliderGrid">
        <div><md-slider min="0" max="100" step="10" ng-model="msg.payload.v1" ng-change="send({topic: 'v1', v: msg.payload.v1})" class="lightSlider"></md-slider></div>
        <div ng-bind-html="msg.payload.v1" class="dimValue"></div>
    </div>
</div>
<div>
    <div>LC4 Table lights</div>
    <div class="sliderGrid">
        <div><md-slider min="0" max="100" step="10" ng-model="msg.payload.v2" ng-change="send({topic: 'v2', v: msg.payload.v2})"  class="lightSlider"></md-slider></div>
        <div ng-bind-html="msg.payload.v2" class="dimValue"></div>
    </div>
</div>
<style>
.sliderGrid{
    display: grid;
    grid-template-columns: 85% 25px;
    margin-left: 25px;
}

.lightSlider {
    float:right;
    width: 100%   
}
.lightSlider .md-thumb:after, .lightSlider .md-track{
    background-color: #FA9900 !important;
    border-color: #FA9900 !important;
}
.lightSlider .md-focus-thumb, .lightSlider .md-focus-ring{
    background-color: #FA9900;
}
.dimValue {
  clear: right; 
  margin: 10px; 0 0 7px;  
}

</style>

Thanks, I'll try out your styling

I've done a bit more since then

I you use md-discrete it should only send once you've finished dragging but you need

.md-track-ticks canvas { display: none; }

This will fill the slider as it's dragged

.dimSlider .md-thumb:after, .dimSlider .md-track-fill{
    background-color: #F9BE1F !important;
    border-color: #F9BE1F !important;
}
1 Like

@iiLaw Lawrence - I tried your code without this bit and two sliders do appear, but I can not move them. All I get in the debug is a payload of "undefined"

I tried in Safari, Chrome and FireFox and all experience the same thing.

This is running on a Mac
macOS 10.14.6
Node-RED v1.0.2
Node.js v12.13.0
Dashboard v2.19.1

ok I've had that and can't remember how to fix

I need to de-angular some of my template code below to recreate the above once I have will post but if your angular is your thing

 <div ng-repeat="controls in msg.payload.controlS | filter:{lbl: '!!'}">
        <div>{{controls.lbl}}</div>
        <div class="{{controls.type}}Grid">
     
            <div ng-If="controls.type == 'dim' "><md-slider id="{{msg.gpId}}C{{$index+1}}" min="0" max="100" step="10" ng-model="controls.v" ng-change="send(action({gpId: msg.gpId, id: $index+1, v: controls.v}))"  md-discrete class="dimSlider"></md-slider></div>
            <div ng-If="controls.type == 'dim' "  id="{{msg.gpId}}C{{$index+1}}v" ng-bind-html="controls.v" class="value"></div>
    
        </div>
    </div> 

Actually I'm not using it for anything. I saw the thread and decided to try your code and when it didn't work I thought it best to report the issue :grin:

@zenofmud Paul thanks test on chrome & FF on win10
And chrome on iOS

<style>
.md-track-ticks canvas { display: none; }
.dimGrid{
    display: grid;
    grid-template-columns: 85% 25px;
    margin-left: 12px;
}
.dimSlider {
    float:left;
    width: 90%   
}
.dimSlider .md-thumb:after, .dimSlider .md-track-fill{
    background-color: #F9BE1F !important;
    border-color: #F9BE1F !important;
}
.value {
  clear: right; 
  margin: 10px; 0 0 7px;  
}
</style>

<div>LC1 - "normal" mode output: continously while sliding </div>
<div class="dimGrid">
    <div><md-slider id="sl-1" min="0" max="100" step="10" ng-model="msg.payload.sv1" ng-change="send({id: 1, payload: msg.payload.sv1})" class="dimSlider"></md-slider></div>
    <div ng-bind-html="msg.payload.sv1" class="value"></div>
</div>
<div>LC2 - "discrete" mode output: only on release</div>
<div class="dimGrid">
    <div><md-slider id="sl-2" md-discrete min="0" max="100" step="10" ng-model="msg.payload.sv2" ng-change="send({id: 2, payload: msg.payload.sv2})" class="dimSlider"></md-slider></div>
    <div ng-bind-html="msg.payload.sv2" class="value"></div>
</div

It's still not working for me in iOS 13.2.2 or on my Mac in Safari, Chrome of FireFox. The top slider doesn't work at all and the bottom slider changes to a teardrop
51 AM
but slides back to 0 as soon as it is released.
12 AM

Ok I've testes on iOS 13.2.3. on Safari & Chrome works. Worked on 13.2.2 as well.
Not sure how I bottom this one out as I don't have a mac.

LC2 example is an example of output: only on release this same behavior as Dashboard slider. When you move focus away it should revert to a ring have to say the UX is bit odd, but I need send on release (e.d slide end).

Top sliders standard Dashboard sliders first continuous/second on release.
Bottom sliders my code.