Template - Slider doesn't get updated

Apps & Services HABPanel
1

So here I am again with a little question, hope you don’t mind me posting beginners questions.
I made this slider template:

<div style="background: rgba(0,0,0,0.5);
            margin-top: 3px;
            margin-left: 3px;
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            width:300px; height: 150px;
            align= center;
">
			<div class="row" style="height: 30px" >
  		</div>
			<div ng-init="slider = {
    		value: itemValue('Eetkamer'), 
    		options: {
    			floor: 0,
    			ceil: 100,
    			step: 1
			}};"class="row" style="
  		  	font-size: 2em;
  		  	font-family: Roboto, 
        	Helvetica, sans-serif;
        	text-align: center;            
  		  	margin-top: 10px;
        	margin-left: 0px;
        	margin-right: 0px         
   		">
  		</div>

			<rzslider	
    		rz-slider-model="slider.value"
    		rz-slider-options="slider.options"
  			ng-click="sendCmd('Eetkamer', slider.value)">
			</rzslider>
			<div class="row" style="
  		  font-size: 2em;
  		  font-family: Roboto, 
        Helvetica, sans-serif;
        text-align: center;            
  		  margin-top: 10px;
        margin-left: 0px;
        margin-right: 0px         
   		">
        Woonkamer
			</div>
</div>

The slider is doing its job, move the handle and my lights get updated. But when I control my hardware dimmer the status doesn’t get updated. So I created a slider widget, with works super, this one get’s updated.
So I’m sure there is a mistake in my code or I forgot the update statement, but I don’t know how and I don’t find it on this forum. I think that this is the code responsible for the update, but it only works if I run my template.
Hopefully someone knows how to fix it.
Thanks in advance for reading this.

2

You can’t use <rzslider /> directly because it has no code to update the value from an external event. You have to use <widget-slider ng-model="(model)" /> (search for that, you’ll find a couple examples in other threads).

1 Like
3

Thx, @ysc
Changed it to this:

<div style="background: rgba(0,0,0,0.5);
            margin-top: 3px;
            margin-left: 3px;
            border-radius: 10px;
            border: 1px;
            border-style: solid;
            border-color: rgb(100,100,100) ;
            width:300px; height: 150px;
            align= center;
            ">
			<div class="row" style="height: 30px" >
  		</div>
			<div ng-init='model={"name": "Woonkamer", "item": "Woonkamer", "floor": 0, "ceil": 100, "step":5, "unit": "%"}'>
  			<widget-slider ng-model="model" />
			</div>
</div>

And it’s working great now. Thanks for the advice!

1 Like