Search code examples
jquerycssjquery-knobround-slider

Adding CSS to Jquery knob?

I have 2 questions. Firstly, how do you go about changing the CSS for a knob? I've tried adding a class to it but that didn't seem to work. Neither did doing inline styling. Anyone have any clue how this can be done (An example would be amazing)?

Secondly, does anyone have any idea how to modify the size of the knob based on window size? I can't seem to figure out how to make it take percentage inputs.

EDIT: To change the CSS, you must use the Draw function since it is done using Canvas, there is no way to apply CSS to it directly.

This worked for me:

$(".dial").knob({
    'draw': function() {
        $(this.i).css('font-size', '100px');
      }
});
Solution

  • Since jQuery Knob using the Canvas, so we can't directly customize this through CSS.

    Alternatively you can use the jQuery roundSlider plugin which is similar to knob, but it constructs based on the div elements only. So you can customize the overall control as per your wish.

    For more details check the demos and documentation page.

    Check here the different appearances.