Logic Machine Forum
Custom Css Circularslider - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Custom Css Circularslider (/showthread.php?tid=1717)

Custom Css Circularslider - JoseJimenez94 - 13.11.2018

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.

RE: Custom Css Circularslider - Daniel - 13.11.2018

Hi
Try this

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


RE: Custom Css Circularslider - JoseJimenez94 - 13.11.2018

(13.11.2018, 16:48)Daniel. Wrote: 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?

RE: Custom Css Circularslider - Daniel - 13.11.2018

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

RE: Custom Css Circularslider - DGrandes - 05.03.2019

(13.11.2018, 17:15)JoseJimenez94 Wrote:
(13.11.2018, 16:48)Daniel. Wrote: 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

RE: Custom Css Circularslider - admin - 05.03.2019

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)');
    });
  }
});