This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Custom Css Circularslider
#1
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.
Reply
#2
Hi
Try this

Code:
.circularslider-value {
 font-size: 40px !important;
}
------------------------------
Ctrl+F5
Reply
#3
(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?
Reply
#4
It is just another element which is overlapping it. Not sure if this can be changed.
------------------------------
Ctrl+F5
Reply
#5
(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
Reply
#6
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)');
    });
  }
});
Reply


Forum Jump: