Slider widget question

Apps & Services HABPanel
1

I have been using a custom rzslider in my thermostat widget, but it has some issues. It doesn’t update if the value is changed outside the widget once it is loaded. This is not true if I use a slider widget on its own. I am trying to use a slider widget inside my custom widget, and put in the following code:

<div ng-init='model={"name": "heat", "item": "my_item"}'>
  <widget-slider ng-model="model" />
</div>

This works great, and I get a slider linked to the item, which updates whenever the value changes. The variable works great when I set the name and item, but I am not sure how to set the other options available in the slider. For example, if I add a “min”: “50”, it does not set the minimum. I also can’t seem to make the slider vertical, or control any of the advanced settings like hiding the title label, etc. I am assuming that I can do this, but I have no idea what the variables are I need to set. Are these documented somewhere. or can someone tell me how to do it?

As a second question, both with the slider widget, as well as the others like the button widget, switch widget, etc. is it possible to set a class and/or id for CSS purposes? For example, when I used the rzslider directly, I can do something like:

<rzslider class="temp-slider" id="heat" rz-slider-model="heatslider.value" ..."/>

I can then specify CSS rules for “div.temp-slider” and “div#heat.temp-slider” that will set CSS rules for just that slider, without messing up any others outside my widget. Is it possible to do the same thing when using a widget-slider?

Thanks in advance for any help

2

Yeah sorry for the current lack of documentation…!

You can check out the model expected for the slider here, min is actually “floor” and max “ceil”.

As for the custom styling I think you could give your slider an id (<widget-slider id="myid">...</widget-slider>) and add an inline style node before like:

<style>
#myid .someclass {
etc.

}
</style>
3

Awesome, thank you so much. The code is exactly what I was looking for, and setting the values works perfectly. I did a quick test adding 1 style and changed a color, and that works perfectly as well. I should have everything I need.

Thanks again.

4

After the help, I have now updated my widget, and everything is working (almost) perfectly, so thank you again. I do have 1 final question though. The display for the slider is showing the number as a floating point number with 3 decimal places, like “71.500”. I updated my rule to round the number off, but even when that works (I’m having some trouble with the rule always firing correctly) it shows the number as “72.000” instead of just “72”. If I change the value using the slider, it goes in 1 digit increments, and then correctly shows a number without a decimal.

I have looked at everything I can think of, and I can’t see how to fix this. I notice this also happens if I make a single slider widget on a dashboard. I guess what I’m asking for is a new feature request. Could you add an option, maybe a “show rounded” or something similar, that would round off a value from an item to the nearest whole number? I was going to suggest maybe rounding using the step value, like a rounding function that looks like:

((item.value + (step/2.0)) / step)

Unfortunately, as I think about it, that wouldn’t work in all cases; If you have a step of 5, that would round off to the nearest 5, but if you have values of 32 to 62, with a step of 5, that would be a problem.

If rounding can’t be done easily, maybe an option to just format the output number, or simply truncate it down to an integer would work. I have exactly zero experience with Angular, and almost zero with javascript in general, so if neither of these things can be done easily, feel free to tell me so, and don’t worry about it. What I have is so much better than I ever expected, and I am really thankful for the custom widget stuff you have already created.

Thanks again.

5

Thanks Tim for pointing me in the right direction for this custom slider. I had the same 3 decimal point issue but solved it by adding a step option in the model definition. Updating your example above, this exactly replicates the standard slider widget.

<div ng-init='model={"name": "heat", "item": "my_item", "floor": 10, "ceil": 30, "step":0.5, "unit": "°C"}'>
  <widget-slider ng-model="model" />
 
</div>
6

Well, now I feel dumb. I added a “step”:1, and now I get a nice even number with zero decimal points. After spending all the time on rules and other ways to try to round and truncate, that 1 entry fixed it.

The step parameter should default to 1, but explicitly setting it does indeed fix my issue.

At any rate, the slider (and my custom widget) seem to be operating well.

1 Like
7

Hi sir,
Can you show me elaborately how can I create sliders like in this link:http://angular-slider.github.io/angularjs-slider/