Add Slider widget in Template!

Apps & Services HABPanel
, ,
Tags: #<Tag:0x00007efed237ed08> #<Tag:0x00007efed237e9e8> #<Tag:0x00007efed237e768>
#1

hi ,
I Am trying to add a slider in custom widget with the code :

<div ng-init='lightPanleModel={
                             name: "volume",
                             item: "CenterLightDimmer",
                             floor : 0,
                             ceil: 100,
                             step: 5,
                             hidelabel : true,
                             hidelimits: true,
                             vertical: "true",
                             showTicks:true
                             }'>
     <widget-slider ng-model="lightPanleModel"/>
</div>

also I made some changes in the css style , but it’s never look the same when using the builtin slider widget
also the options like ‘showTicks’ is not working in my template

see the image :

31 AM
Screen Shot 2017-08-27 at 5.40.31 AM.jpg493×555 63.3 KB

can someone tell me what went wrong ?

thank you all .

#2

I have the exact same issue. I’ve tried different ways of defining the slider in the code to make it vertical, but it won’t work. I tried the ecobee widget to check the code and the behaviour, and same thing, it doesn’t work for me either.

I’m working on the openHAB 2.1.0 - release build. I don’t know if there can be a bug in this version or if I’m doing something wrong…

#3

looks like a bug to me , I did try everything , still cant pass some options to the widget like showTicks:true
its only happened when vertical: "true"

I wish some one also try it before, to give us a clue .

for now I am using it with vertical: "false"

18 AM

#4

Have you tried:

<div style="height: 100%" ng-init='lightPanleModel={
                             name: "volume",
                             item: "CenterLightDimmer",
                             floor : 0,
                             ceil: 100,
                             step: 5,
                             hidelabel : true,
                             hidelimits: true,
                             vertical: "true",
                             showTicks:true
                             }'>
     <widget-slider ng-model="lightPanleModel"/>
</div>

CSS can be tricky…

#5

@ysc , thank you for reply ,

yes I did play a lot with CSS,
I also remove all my custom CSS and still can’t get the ‘Ticks’ to shown in the ‘vertical’ mode .

#6

I face the same issue w/o changing css properties: I am not able to create a template with a vertical slider. The slider’s height is not changeable, and pressing on it removes the slider and shows the handle only.

Did you find a solution?

Thx, G.

#7

Hi,
Maybe you can share this thermomether? :stuck_out_tongue:

#8

Hi Guys

Im setting this up as a volume for my stereo, its a Dimmer item type.

I have this working but see odd things in the console log. It changes, but then it changes back to its original value before changing to its correct value?

This does not happen on Dimmer lights.

Does anyone know why this occurs?

12:22:51.937 [INFO ] [smarthome.event.ItemCommandEvent     ] - Item 'Zone_1_Volume' received command 30
12:22:51.938 [INFO ] [arthome.event.ItemStatePredictedEvent] - Zone_1_Volume predicted to become 30
12:22:51.938 [INFO ] [smarthome.event.ItemStateChangedEvent] - Zone_1_Volume changed from 10 to 30
12:22:51.955 [INFO ] [smarthome.event.ItemStateChangedEvent] - Zone_1_Volume changed from 30 to 10


    <div style="height: 100%" ng-init='YamahaAVRVolume={name: "volume", item: "Zone_1_Volume",
                             "floor" : 0,
                   					 "ceil": 100,
                    			   "step": 5,
                   				   "hidelabel" : "true",
                    			 	 "hidelimits": "true",
                             }'>
     <widget-slider ng-model="YamahaAVRVolume"/>
</div>

Thankyou

#9

Does anyone have a working horitzontal slider without errors in the console in habpanel?