Custom Css Circularslider

[JoseJimenez94]

Hi everyone,

When i use a circular slider to control, for example, the temperature of a room, the size of the number in the middle of the circle is too small. 
I'm not sure if i could change it using a custom CSS and what kind of class i have to use.
I would appreciate any help.

Thanks.

[Daniel]

Hi
Try this

Code:

.circularslider-value {
 font-size: 40px !important;
}

[JoseJimenez94]

Hi
Try this

Code:

.circularslider-value {
 font-size: 40px !important;
}

Thanks Daniel. It's works. As I saw that there is a limit from which the text is cut; can not this limit be removed?

[Daniel]

It is just another element which is overlapping it. Not sure if this can be changed.

[DGrandes]

Hi
Try this

Code:

.circularslider-value {
 font-size: 40px !important;
}

Thanks Daniel. It's works. As I saw that there is a limit from which the text is cut; can not this limit be removed?

Hi, you can add "padding" to remove text cut

---

I have another question:

I want change circular slider color dinamicaly (deppending of the valve) but I don´t find css class. I´ve seen that circular slider control is a canvas.
How can I change the color?

Thanks

[admin]

You can change color via hue-rotate CSS filter. In this example additional class is set to slider and control object is 32/1/2. This will only work in "show control" mode.

Code:

$(function(){
  if (typeof grp === 'object') {
    grp.listen('32/1/2', function(obj) {
      $('.slider').css('filter', 'hue-rotate(' + (obj.value * 3) + 'deg)');
    });
  }
});