How to create knob control on Juce?


Hi all!

I want to create a knob on juce like .But i do not know where i start. Can you guys give me some feedback?
I also do not know C++ so do i need to learn C++ to design knob control?

Thanks all.


maybe from here if you want that specific component ?


The recommended way in JUCE is to draw your knob using drawing commands using JUCE Graphics (rather than the filmstrip/sprite technique that something like KnobMan uses and the code you linked - @kraken has pointed you to the source for the GUI components for that).

Have a look at the tutorials: to get started. But you will need to learn C++ along the way.

Here’s a reasonably minimal knob that’s just a circle as a starting point. this uses a custom look-and-feel to draw the circles and the line to show the position/value of the knob. From there you could customise the various elements, add gradients, and so on…


#include "../JuceLibraryCode/JuceHeader.h"

class MyKnobLF : public LookAndFeel_V3
    void drawRotarySlider (Graphics& g, int x, int y, int width, int height, float sliderPos,
                           const float rotaryStartAngle, const float rotaryEndAngle, Slider& slider)
        const float radius = jmin (width / 2, height / 2) - 4.0f;
        const float centreX = x + width * 0.5f;
        const float centreY = y + height * 0.5f;
        const float rx = centreX - radius;
        const float ry = centreY - radius;
        const float rw = radius * 2.0f;
        const float angle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);
        // fill
        g.setColour (Colours::orange);
        g.fillEllipse (rx, ry, rw, rw);
        // outline
        g.setColour (Colours::red);
        g.drawEllipse (rx, ry, rw, rw, 1.0f);
        Path p;
        const float pointerLength = radius * 0.33f;
        const float pointerThickness = 2.0f;
        p.addRectangle (-pointerThickness * 0.5f, -radius, pointerThickness, pointerLength);
        p.applyTransform (AffineTransform::rotation (angle).translated (centreX, centreY));
        // pointer
        g.setColour (Colours::yellow);
        g.fillPath (p);


class MainContentComponent   : public Component
        addAndMakeVisible (knob);
        knob.setLookAndFeel (&lf);
        knob.setSliderStyle (Slider::Rotary);
        knob.setTextBoxStyle (Slider::NoTextBox, true, 0, 0);
        setSize (600, 400);
    void paint (Graphics& g) override
        g.fillAll (Colours::black);
    void resized() override
        knob.setBounds (10, 10, 120, 120);

    Slider knob;
    MyKnobLF lf;


LookAndFeel Basics question

Thank you for your advice.I will try to do it.


If i learn C++. Which part of C++ neccessary to learn to use in Juce?
Thank you!