Knob

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.

QKnob API

Loading API...

Usage

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.

Basic

Basic



Show value

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



Min and max

Custom min/max



Custom step

Custom step



Offset angle

Offset angle



Disable and readonly

Disable and readonly



Native form submit

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):

Native form