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.
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.
Min and max
Inner min/max v1.18.4+
Sometimes you need to restrict the model value to an interval inside of the track’s length. For this purpose, use
inner-max props. First prop needs to be higher or equal to
min prop while the latter needs to be lower or equal to the
Disable and readonly
Native form submit v1.9+
When dealing with a native form which has an
action and a
method (eg. when using Quasar with ASP.NET controllers), you need to specify the
name property on QKnob, otherwise formData will not contain it (if it should):