The QKnob component is used to take a number input from the user through mouse/touch panning. It is based on QCircularProgress and inherits all its properties and behavior.


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [


By default, QKnob inherits current text color (as arc progress color and inner label color) and current font size (as component size). For customization, you can use the size and color related props.


In the example below, show-value property also enables the default slot, so you can fill it with custom content, like even a QAvatar or a QTooltip. The font-size prop refers to the inner label font size.

Show value

Custom min/max

Custom step

Offset angle

Disable and readonly