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.
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
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.
If the default slot contains an image, you have to style it with class no-pointer-events or set the draggable prop to false. Otherwise browser’s default image dragging behaviour overrides QKnob’s one
Min and max
Inner min/max v2.5.4+
Sometimes you need to restrict the model value to an interval inside of the track’s length. For this purpose, use inner-min and 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 max prop.
Custom step
Offset angle
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):
Accessibility v2.25+
QKnob follows the WAI-ARIA slider pattern: the focusable element itself carries role="slider" with aria-valuemin/aria-valuemax/aria-valuenow, plus aria-disabled or aria-readonly when it is not editable. The Arrow keys step the value and PageUp / PageDown jump by 10 steps. There is no accessible name by default, so pass an aria-label attribute (it lands on the slider element) to tell screen reader users what the knob controls.